#73 change authorization

This commit is contained in:
2024-08-25 22:25:32 +02:00
parent 81548465e7
commit d854dae68f
19 changed files with 589 additions and 187 deletions

View File

@@ -0,0 +1,72 @@
package auth
templ SignInOrUp(isSignIn bool) {
<form
class="max-w-xl px-2 mx-auto flex flex-col gap-4 h-full justify-center"
hx-target="#sign-in-or-up-error"
if isSignIn {
hx-post="/api/auth/signin"
} else {
hx-post="/api/auth/signup"
}
>
<h2 class="text-6xl mb-10">
if isSignIn {
Sign In
} else {
Sign Up
}
</h2>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z"
></path>
<path
d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z"
></path>
</svg>
<input type="text" class="grow" placeholder="Email" name="email"/>
</label>
<label class="input input-bordered flex items-center gap-2">
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 16 16"
fill="currentColor"
class="h-4 w-4 opacity-70"
>
<path
fill-rule="evenodd"
d="M14 6a4 4 0 0 1-4.899 3.899l-1.955 1.955a.5.5 0 0 1-.353.146H5v1.5a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1-.5-.5v-2.293a.5.5 0 0 1 .146-.353l3.955-3.955A4 4 0 1 1 14 6Zm-4-2a.75.75 0 0 0 0 1.5.5.5 0 0 1 .5.5.75.75 0 0 0 1.5 0 2 2 0 0 0-2-2Z"
clip-rule="evenodd"
></path>
</svg>
<input type="password" class="grow" placeholder="Password" name="password"/>
</label>
<div class="flex justify-end items-center gap-2">
if isSignIn {
<a href="/auth/signup" class="link text-gray-500 text-sm">Don't have an account? Sign Up</a>
<button class="btn btn-primary self-end">
Sign In
</button>
} else {
<a href="/auth/signin" class="link text-gray-500 text-sm">Already have an account? Sign In</a>
<button class="btn btn-primary self-end">
Sign Up
</button>
}
</div>
@Error("")
</form>
}
templ Error(message string) {
<p class="text-error text-right" id="sign-in-or-up-error">
{ message }
</p>
}

13
template/auth/user.templ Normal file
View File

@@ -0,0 +1,13 @@
package auth
templ UserComp(user string) {
<div id="user-info" class="flex gap-5 items-center">
if user != "" {
<a hx-get="/api/auth/signout" hx-target="#user-info" class="btn btn-sm">Sign Out</a>
<p>{ user }</p>
} else {
<a href="/auth/signup" class="btn btn-sm">Sign Up</a>
<a href="/auth/signin" class="btn btn-sm">Sign In</a>
}
</div>
}

16
template/index.templ Normal file
View File

@@ -0,0 +1,16 @@
package template
templ Index() {
<div class="hero bg-base-200 h-full">
<div class="hero-content text-center">
<div class="max-w-md">
<h1 class="text-5xl font-bold">Next Level Workout Tracker</h1>
<p class="py-6">
Ever wanted to track your workouts and see your progress over time? ME-FIT is the perfect
solution for you.
</p>
<a href="/app" class="btn btn-primary">Get Started</a>
</div>
</div>
</div>
}

32
template/layout.templ Normal file
View File

@@ -0,0 +1,32 @@
package template
templ Layout(slot templ.Component, user templ.Component) {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>ME-FIT</title>
<link rel="icon" href="/static/favicon.svg"/>
<link rel="stylesheet" href="/static/css/tailwind.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script defer src="https://umami.me-fit.eu/script.js" data-website-id="3c8efb09-44e4-4372-8a1e-c3bc675cd89a"></script>
<script src="/static/js/htmx.min.js" data-website-id="3c8efb09-44e4-4372-8a1e-c3bc675cd89a"></script>
</head>
<body>
<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">
<a href="/" class="flex-1 flex gap-2">
<img src="/static/favicon.svg" alt="ME-FIT logo"/>
<span>ME-FIT</span>
</a>
@user
</div>
<div class="flex-1">
if slot != nil {
@slot
}
</div>
</div>
</body>
</html>
}

11
template/not_found.templ Normal file
View File

@@ -0,0 +1,11 @@
package template
templ NotFound() {
<main class="flex h-full justify-center items-center ">
<div class="bg-error p-16 rounded-lg">
<h1 class="text-4xl text-error-content mb-5">Not Found</h1>
<p class="text-lg text-error-content mb-5">The page you are looking for does not exist.</p>
<a href="/" class="btn btn-lg btn-primary">Go back to home</a>
</div>
</main>
}

View File

@@ -0,0 +1,89 @@
package workout
templ WorkoutComp(currentDate string) {
<main class="mx-2">
<form
class="max-w-xl mx-auto flex flex-col gap-4 justify-center mt-10"
hx-post="/api/workout"
hx-target="#workout-placeholder"
hx-swap="outerHTML"
>
<h2 class="text-4xl mb-8">Track your workout</h2>
<input
id="date"
type="date"
class="input input-bordered"
value={ currentDate }
name="date"
/>
<select class="select select-bordered w-full" name="type">
<option>Push Ups</option>
<option>Pull Ups</option>
</select>
<input
type="number"
class="input input-bordered"
placeholder="Sets"
name="sets"
/>
<input
type="number"
class="input input-bordered"
placeholder="Reps"
name="reps"
/>
<button class="btn btn-primary self-end">Save</button>
</form>
<div hx-get="/api/workout" hx-trigger="load"></div>
</main>
}
type Workout struct {
Id string
Date string
Type string
Sets string
Reps string
}
templ WorkoutListComp(workouts []Workout) {
<div class="overflow-x-auto mx-auto max-w-screen-lg">
<h2 class="text-4xl mt-14 mb-8">Workout history</h2>
<table class="table table-auto max-w-full">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Sets</th>
<th>Reps</th>
<th></th>
</tr>
</thead>
<tbody>
<tr class="hidden" id="workout-placeholder"></tr>
for _,w := range workouts {
@WorkoutItemComp(w, false)
}
</tbody>
</table>
</div>
}
templ WorkoutItemComp(w Workout, includePlaceholder bool) {
if includePlaceholder {
<tr class="hidden" id="workout-placeholder"></tr>
}
<tr>
<th>{ w.Date }</th>
<th>{ w.Type }</th>
<th>{ w.Sets }</th>
<th>{ w.Reps }</th>
<th>
<div class="tooltip" data-tip="Delete Entry">
<button hx-delete={ "api/workout/" + w.Id } hx-target="closest tr">
Delete
</button>
</div>
</th>
</tr>
}