x/web-app-template
Archived
Template
2
0
Fork 0
Code Issues 13 Pull Requests 4 Actions Packages Activity

fix(auth): refactor ui to delete account #164
All checks were successful
Build Docker Image / Explore-Gitea-Actions (push) Successful in 44s
Details

Browse Source
This commit is contained in:
Tim
2024-09-11 18:17:44 +02:00
parent 59b064a63c
commit 641d201aee
2 changed files with 25 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
template/auth/user.templ
View File

@@ -3,8 +3,30 @@ package auth
templ UserComp(user string) { templ UserComp(user string) {
<div id="user-info" class="flex gap-5 items-center"> <div id="user-info" class="flex gap-5 items-center">
if user != "" { if user != "" {
<a hx-get="/api/auth/signout" hx-target="#user-info" class="btn btn-sm">Sign Out</a> <div class="group inline-block relative">
<p>{ user }</p> <button
class="font-semibold py-2 px-4 inline-flex items-center"
>
<span class="mr-1">{ user }</span>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
></path>
</svg>
</button>
<div class="absolute hidden group-hover:block w-full">
<ul class="menu bg-base-300 rounded-box w-fit float-right mr-4 p-3">
<li class="mb-1">
<a hx-get="/api/auth/signout" hx-target="#user-info">Sign Out</a>
</li>
<li><a class="text-error">Delete Account</a></li>
</ul>
</div>
</div>
} else { } else {
<a href="/auth/signup" class="btn btn-sm">Sign Up</a> <a href="/auth/signup" class="btn btn-sm">Sign Up</a>
<a href="/auth/signin" class="btn btn-sm">Sign In</a> <a href="/auth/signin" class="btn btn-sm">Sign In</a>

2
template/layout.templ
View File

@@ -15,7 +15,7 @@ templ Layout(slot templ.Component, user templ.Component) {
</head> </head>
<body> <body>
<div class="h-screen flex flex-col"> <div class="h-screen flex flex-col">
<div class="flex justify-end items-center gap-2 py-1 px-2 md:gap-10 md:px-10 md:py-2 shadow"> <div class="flex justify-end items-center gap-2 py-1 px-2 h-12 md:gap-10 md:px-10 md:py-2 shadow">
<a href="/" class="flex-1 flex gap-2"> <a href="/" class="flex-1 flex gap-2">
<img src="/static/favicon.svg" alt="ME-FIT logo"/> <img src="/static/favicon.svg" alt="ME-FIT logo"/>
<span>ME-FIT</span> <span>ME-FIT</span>