update user settings page

handlers/user.go

@@ -80,15 +80,15 @@ func account(s *service.Service, w http.ResponseWriter, r *http.Request) httputi
 		http.Redirect(w, r, "/", http.StatusSeeOther)
 		return nil
 	}
-	passkeySettings, err := s.PasskeySettings(r.Context(), user.KTHID)
+	passkeys, err := s.ListPasskeysForUser(r.Context(), user.KTHID)
 	if err != nil {
 		return err
 	}
 	isAdmin, err := pls.CheckUser(r.Context(), user.KTHID, "admin-read")
 	if err != nil {
 		return err
 	}
-	return templates.Account(*user, passkeySettings, isAdmin)
+	return templates.Account(*user, passkeys, isAdmin)
 }
 
 func acceptInvite(s *service.Service, w http.ResponseWriter, r *http.Request) httputil.ToResponse {

pkg/static/public/style.dist.css

@@ -570,6 +570,10 @@ html {
   grid-column: 1 / -1;
 }
 
+.mt-1 {
+  margin-top: 0.25rem;
+}
+
 .block {
   display: block;
 }
@@ -626,6 +630,10 @@ html {
   min-height: 100vh;
 }
 
+.w-16 {
+  width: 4rem;
+}
+
 .w-3\/5 {
   width: 60%;
 }
@@ -654,6 +662,10 @@ html {
   max-width: calc(100vw - 2rem);
 }
 
+.max-w-lg {
+  max-width: 32rem;
+}
+
 .shrink-0 {
   flex-shrink: 0;
 }
@@ -662,10 +674,6 @@ html {
   flex-grow: 1;
 }
 
-.basis-full {
-  flex-basis: 100%;
-}
-
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -712,6 +720,14 @@ html {
   gap: 1rem;
 }
 
+.gap-8 {
+  gap: 2rem;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
 .rounded {
   border-radius: 0.25rem;
 }
@@ -835,6 +851,11 @@ html {
   line-height: 1.25rem;
 }
 
+.text-xl {
+  font-size: 1.25rem;
+  line-height: 1.75rem;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
@@ -844,6 +865,21 @@ html {
   color: rgb(245 245 245 / var(--tw-text-opacity));
 }
 
+.text-cerise-regular {
+  --tw-text-opacity: 1;
+  color: rgb(232 61 132 / var(--tw-text-opacity));
+}
+
+.text-cerise-strong {
+  --tw-text-opacity: 1;
+  color: rgb(238 42 123 / var(--tw-text-opacity));
+}
+
+.text-cerise-light {
+  --tw-text-opacity: 1;
+  color: rgb(236 95 153 / var(--tw-text-opacity));
+}
+
 .outline-none {
   outline: 2px solid transparent;
   outline-offset: 2px;
@@ -1023,6 +1059,10 @@ html {
   padding-right: 0.75rem;
 }
 
+.\[\&\>a\]\:shrink-0>a {
+  flex-shrink: 0;
+}
+
 .\[\&\>a\]\:items-center>a {
   align-items: center;
 }

service/passkey.go

@@ -42,11 +42,3 @@ func (s *Service) ListPasskeysForUser(ctx context.Context, kthid string) ([]mode
 func (s *Service) PasskeyLogin() func() templ.Component {
 	return func() templ.Component { return templates.PasskeyLoginForm("", nil) }
 }
-
-func (s *Service) PasskeySettings(ctx context.Context, kthid string) (func() templ.Component, error) {
-	passkeys, err := s.ListPasskeysForUser(ctx, kthid)
-	if err != nil {
-		return nil, err
-	}
-	return func() templ.Component { return templates.PasskeySettings(passkeys) }, nil
-}

templates/admin.templ

@@ -1,30 +1,16 @@
 package templates
 
-import (
-	"fmt"
-	"github.com/datasektionen/logout/pkg/static"
-)
+import "fmt"
+
+templ adminNav() {
+	<a href="/admin/members">Members</a>
+	<a href="/admin/oidc-clients">OIDC Clients</a>
+	<a href="/admin/invites">Invites</a>
+}
 
 templ AdminPage() {
-	@page() {
-		<nav
-			class="
-				w-full h-12 bg-gray-700 flex uppercase
-				[&>a:not(:first-child)]:flex [&>a]:items-center [&>a:not(:first-child)]:px-3 hover:[&>a]:bg-gray-600 [&>a]:transition-colors
-			"
-		>
-			<a href="/admin" class="h-full block aspect-square grid place-items-center fill-cerise-regular bg-gray-600">
-				@templ.Raw(static.PublicAsString("delta.svg"))
-			</a>
-			<a href="/admin/members">Members</a>
-			<a href="/admin/oidc-clients">OIDC Clients</a>
-			<a href="/admin/invites">Invites</a>
-		</nav>
-		<div class="flex justify-center min-h-[calc(100vh-3rem)]">
-			<main class="bg-gray-800 w-[1000px] md:max-w-[calc(100vw-8rem)]">
-				{ children... }
-			</main>
-		</div>
+	@page(nav(true)) {
+		{ children... }
 	}
 }
 
@@ -85,23 +71,3 @@ templ UploadProgress(progress float64) {
 templ UploadMessage(message string, isErr bool) {
 	<p class={ "p-2 rounded " + bigIfTrue(isErr, "bg-red-600/50", "bg-green-600/50") }>{ message }</p>
 }
-
-var input = `
-	border border-neutral-500 grow
-	outline-none focus:border-cerise-strong hover:border-cerise-light
-	bg-slate-800 p-1.5 rounded h-8
-`
-
-var button = `
-	bg-[#3f4c66] p-1 h-8 block rounded border text-center
-	select-none border-transparent outline-none
-	focus:border-cerise-strong hover:border-cerise-light
-`
-
-var roundButton = `
-	bg-[#3f4c66] shrink-0 h-5 w-5 rounded-full
-	grid place-items-center pointer
-	border border-transparent outline-none focus:border-cerise-strong hover:border-cerise-light relative
-	[&>img]:w-3/5 [&>img]:h-3/5 [&>img]:invert
-	[&>p]:text-center [&>p]:leading-none
-`