what does loco offers

This commit is contained in:
Priec
2026-05-15 22:31:26 +02:00
parent 0c25fa5d11
commit 8b7f883f14
22 changed files with 731 additions and 5 deletions

View File

@@ -0,0 +1,65 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{% block title %}{% endblock title %}</title>
<script src="https://cdn.tailwindcss.com?plugins=forms,typography,aspect-ratio,line-clamp"></script>
{% block head %}
{% endblock head %}
</head>
<body class="min-h-screen bg-background font-sans antialiased">
<div class="relative flex min-h-screen flex-col bg-background">
<div class="themes-wrapper bg-background">
<main class="relative flex min-h-svh flex-1 flex-col bg-background peer-data-[variant=inset]:min-h-[calc(100svh-theme(spacing.4))] md:peer-data-[variant=inset]:m-2 md:peer-data-[state=collapsed]:peer-data-[variant=inset]:ml-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow">
<div class="flex flex-1 flex-col gap-4 p-5 pt-5">
<h1 class="scroll-m-20 text-3xl font-bold tracking-tight">
{% block page_title %}{% endblock page_title %}
</h1>
{% block content %}
{% endblock content %}
</div>
</main>
</div>
</div>
{% block js %}
{% endblock js %}
<script>
function confirmDelete(event, delete_url, redirect_to) {
event.preventDefault();
if (confirm("Are you sure you want to delete this item?")) {
var xhr = new XMLHttpRequest();
xhr.open("DELETE", delete_url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
window.location.href = redirect_to;
}
};
xhr.send();
}
}
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.add-more').forEach(button => {
button.addEventListener('click', function () {
const group = this.getAttribute('data-group');
const first = document.getElementById(`${group}-inputs`).querySelector('input');
if (first) {
const clonedInput = first.cloneNode();
clonedInput.value = '';
const container = document.getElementById(`${group}-inputs`);
container.appendChild(clonedInput);
}
});
});
});
</script>
</body>
</html>

View File

@@ -0,0 +1,37 @@
{% extends "base.html" %}
{% block title %}
Create court
{% endblock title %}
{% block page_title %}
Create new court
{% endblock page_title %}
{% block content %}
<div class="mb-10">
<form action="/courts" method="post" class="flex-1 lg:max-w-2xl">
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">name</label>
<input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="name" name="name" type="text" value="" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">surface</label>
<input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="surface" name="surface" type="text" value="" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">indoor</label>
<input class="flex rounded-md border border-input bg-transparent text-base shadow-sm md:text-sm" id="indoor" name="indoor" type="checkbox" value="true" />
</div>
<div class="mt-5">
<button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
</div>
</form>
<br />
<a href="/courts">Back to courts</a>
</div>
{% endblock content %}
{% block js %}
{% endblock js %}

View File

@@ -0,0 +1,42 @@
{% extends "base.html" %}
{% block title %}
Edit court: {{ item.id }}
{% endblock title %}
{% block page_title %}
Edit court: {{ item.id }}
{% endblock page_title %}
{% block content %}
<div class="mb-10">
<form action="/courts/{{ item.id }}" method="post" class="flex-1 lg:max-w-2xl">
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">name</label>
<input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="name" name="name" type="text" value="{{item.name}}" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">surface</label>
<input class="flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm md:text-sm" id="surface" name="surface" type="text" value="{{item.surface}}" />
</div>
<div class="space-y-2">
<label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for=":r2l:-form-item">indoor</label>
<input class="flex rounded-md border border-input bg-transparent text-base shadow-sm md:text-sm" id="indoor" name="indoor" type="checkbox" value="true" {% if item.indoor %}checked{%endif %} />
</div>
<div>
<div class="mt-5">
<button class=" text-xs py-3 px-6 rounded-lg bg-gray-900 text-white" type="submit">Submit</button>
<button class="text-xs py-3 px-6 rounded-lg bg-red-600 text-white"
onclick="confirmDelete(event, '/courts/{{ item.id }}', '/courts' )">Delete</button>
</div>
</div>
</form>
<div id="success-message" class="mt-4"></div>
<br />
<a href="/courts">Back to court</a>
</div>
{% endblock content %}
{% block js %}
{% endblock js %}

View File

@@ -0,0 +1,86 @@
{% extends "base.html" %}
{% block title %}
List of court
{% endblock title %}
{% block page_title %}
court
{% endblock page_title %}
{% block content %}
<div class="mb-10">
{% if items %}
<div class="mb-5">
<div class="relative w-full overflow-auto">
<table class="w-full caption-bottom text-sm">
<thead class="[&amp;_tr]:border-b">
<tr class="border-b transition-colors hover:bg-muted/50">
<th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
{{"name" | capitalize }}
</th>
<th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
{{"surface" | capitalize }}
</th>
<th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
{{"indoor" | capitalize }}
</th>
<th class="h-10 px-2 text-left align-middle font-medium text-muted-foreground [&amp;:has([role=checkbox])]:pr-0 [&amp;>[role=checkbox]]:translate-y-[2px] w-[100px]">
Actions
</th>
</tr>
</thead>
<tbody class="[&amp;_tr:last-child]:border-0">
{% for item in items %}
<tr class="border-b transition-colors hover:bg-muted/50">
<td
class="p-2 align-middle font-medium">
{{item.name | escape }}
</td>
<td
class="p-2 align-middle font-medium">
{{item.surface | escape }}
</td>
<td
class="p-2 align-middle font-medium">
{{ item.indoor }}
</td>
<td>
<a href="/courts/{{ item.id }}/edit">Edit</a>
</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
<div class="flex">
<div class="ml-auto p-4">
<a href="/courts/new"
class="mt-5 bg-blue-500 text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
Create
</a>
</div>
</div>
</div>
{% else %}
<div class="mt-10 flex items-center justify-center">
<div class="bg-white rounded-lg shadow-lg p-8 max-w-4xl w-full flex flex-col items-center">
<h3 class="font-bold text-lg">Nothing Here Yet</h3>
There are no records to display. Add a new record to get started!
<a href="/courts/new"
class="mt-5 bg-blue-500 text-white bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-primary-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-primary-600 dark:hover:bg-primary-700 dark:focus:ring-primary-800">
Create
</a>
</div>
</div>
{% endif %}
</div>
{% endblock content %}

View File

@@ -0,0 +1,22 @@
{% extends "base.html" %}
{% block title %}
View court: {{ item.id }}
{% endblock title %}
{% block content %}
<h1>View court: {{ item.id }}</h1>
<div class="mb-10">
<div>
<label>name: {{item.name}}</label>
</div>
<div>
<label>surface: {{item.surface}}</label>
</div>
<div>
<label>indoor: {{item.indoor}}</label>
</div>
<br />
<a href="/courts">Back to courts</a>
</div>
{% endblock content %}

View File

@@ -0,0 +1,181 @@
{% extends "base.html" %}
{% block title %}ht_booking · Loco SaaS starter{% endblock title %}
{% block page_title %}What this Loco app gives you out of the box{% endblock page_title %}
{% block content %}
<p class="text-gray-600 max-w-3xl">
This page replaces the default Loco fallback screen. Every model, controller,
migration and route below was produced by <code class="bg-gray-100 px-1 rounded">cargo loco generate</code>
nothing here is hand-written boilerplate.
</p>
<!-- 1. AUTHENTICATION -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
<h2 class="text-xl font-semibold">1 · Authentication — JWT API</h2>
<p class="text-sm text-gray-600 mt-1 max-w-3xl">
The SaaS starter ships a complete JWT auth flow in <code class="bg-gray-100 px-1 rounded">src/controllers/auth.rs</code>.
It is a JSON API (no HTML login pages) — so here is a live console that calls those exact endpoints.
</p>
<div class="overflow-auto mt-4">
<table class="w-full text-sm border-collapse">
<thead>
<tr class="text-left border-b border-gray-300">
<th class="py-1 pr-4">Method</th>
<th class="py-1 pr-4">Path</th>
<th class="py-1 pr-4">JSON body</th>
<th class="py-1">Purpose</th>
</tr>
</thead>
<tbody class="font-mono text-xs">
<tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/register</td><td class="pr-4">name, email, password</td><td class="font-sans">create an account</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/login</td><td class="pr-4">email, password</td><td class="font-sans">returns a JWT token</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/current</td><td class="pr-4">— (Bearer token)</td><td class="font-sans">info about the logged-in user</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/forgot</td><td class="pr-4">email</td><td class="font-sans">start password reset</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/reset</td><td class="pr-4">token, password</td><td class="font-sans">set a new password</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/verify/{token}</td><td class="pr-4"></td><td class="font-sans">verify an email address</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/magic-link</td><td class="pr-4">email</td><td class="font-sans">email a passwordless login link</td></tr>
<tr class="border-b border-gray-100"><td class="py-1 pr-4">GET</td><td class="pr-4">/api/auth/magic-link/{token}</td><td class="pr-4"></td><td class="font-sans">exchange the link for a JWT</td></tr>
<tr><td class="py-1 pr-4">POST</td><td class="pr-4">/api/auth/resend-verification-mail</td><td class="pr-4">email</td><td class="font-sans">resend the verification mail</td></tr>
</tbody>
</table>
</div>
<div class="grid md:grid-cols-3 gap-4 mt-6">
<form onsubmit="doRegister(event)" class="space-y-2 rounded-lg bg-gray-50 p-4">
<h3 class="font-medium">Register</h3>
<input name="name" value="Alice" class="w-full rounded border-gray-300 text-sm" placeholder="name">
<input name="email" value="alice@example.com" class="w-full rounded border-gray-300 text-sm" placeholder="email">
<input name="password" type="password" value="loco-password-123" class="w-full rounded border-gray-300 text-sm" placeholder="password">
<button class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">POST /register</button>
<pre id="register-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
</form>
<form onsubmit="doLogin(event)" class="space-y-2 rounded-lg bg-gray-50 p-4">
<h3 class="font-medium">Login</h3>
<input name="email" value="alice@example.com" class="w-full rounded border-gray-300 text-sm" placeholder="email">
<input name="password" type="password" value="loco-password-123" class="w-full rounded border-gray-300 text-sm" placeholder="password">
<button class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">POST /login</button>
<pre id="login-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
</form>
<div class="space-y-2 rounded-lg bg-gray-50 p-4">
<h3 class="font-medium">Current user</h3>
<p class="text-xs text-gray-500">Sends the JWT from a successful login as a Bearer token.</p>
<button onclick="doCurrent()" class="w-full rounded bg-blue-600 text-white text-sm py-2 hover:bg-blue-700">GET /current</button>
<pre id="current-out" class="text-xs bg-gray-900 text-gray-100 rounded p-2 overflow-auto min-h-[3rem] whitespace-pre-wrap"></pre>
</div>
</div>
<p class="text-xs text-gray-500 mt-3">
Active JWT: <code id="token-box" class="bg-gray-100 px-1 rounded break-all"></code>
</p>
</section>
<!-- 2. DATABASE CRUD -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
<h2 class="text-xl font-semibold">2 · Database CRUD — Courts</h2>
<p class="text-sm text-gray-600 mt-1 max-w-3xl">
A model, SeaORM entity, migration, controller and Tera views, all generated with one command:
</p>
<pre class="text-xs bg-gray-900 text-gray-100 rounded p-3 mt-2 overflow-auto">cargo loco generate scaffold court name:string surface:string indoor:bool --html</pre>
<a href="/courts" class="inline-block mt-3 rounded bg-emerald-600 text-white text-sm px-4 py-2 hover:bg-emerald-700">Open /courts &rarr;</a>
</section>
<!-- 3. HEALTH -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
<h2 class="text-xl font-semibold">3 · Health &amp; ops endpoints</h2>
<p class="text-sm text-gray-600 mt-1">Built-in, no code needed:</p>
<ul class="list-disc list-inside text-sm mt-2 space-y-1">
<li><a class="text-blue-600 underline" href="/_ping">/_ping</a> — liveness</li>
<li><a class="text-blue-600 underline" href="/_health">/_health</a> — DB &amp; queue health</li>
<li><a class="text-blue-600 underline" href="/_readiness">/_readiness</a> — readiness probe</li>
</ul>
</section>
<!-- 4. VIEWS + I18N -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4">
<h2 class="text-xl font-semibold">4 · Server-side views &amp; i18n</h2>
<p class="text-sm text-gray-600 mt-1 max-w-3xl">
Tera templates plus Fluent translations. The same key <code class="bg-gray-100 px-1 rounded">hello-world</code>,
resolved by the <code class="bg-gray-100 px-1 rounded">t()</code> function in this template:
</p>
<ul class="list-disc list-inside text-sm mt-2 space-y-1">
<li><strong>en-US:</strong> {{ t(key="hello-world", lang="en-US") }}</li>
<li><strong>de-DE:</strong> {{ t(key="hello-world", lang="de-DE") }}</li>
</ul>
</section>
<!-- 5. MORE -->
<section class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm mt-4 mb-8">
<h2 class="text-xl font-semibold">5 · Also wired up (CLI-generated when you need them)</h2>
<ul class="list-disc list-inside text-sm mt-2 space-y-1">
<li>Background workers — <code class="bg-gray-100 px-1 rounded">cargo loco generate worker &lt;name&gt;</code></li>
<li>Scheduled / one-off tasks — <code class="bg-gray-100 px-1 rounded">cargo loco generate task &lt;name&gt;</code></li>
<li>Mailers — <code class="bg-gray-100 px-1 rounded">cargo loco generate mailer &lt;name&gt;</code> (the auth flow already uses one)</li>
<li>Inspect every route — <code class="bg-gray-100 px-1 rounded">cargo loco routes</code></li>
</ul>
</section>
{% endblock content %}
{% block js %}
{% raw %}
<script>
const show = (id, status, body) => {
document.getElementById(id).textContent =
'HTTP ' + status + '\n' + (body && body.length ? body : '(empty body)');
};
let jwt = sessionStorage.getItem('jwt') || '';
const renderToken = () => {
document.getElementById('token-box').textContent = jwt ? jwt : '(none yet — log in)';
};
async function doRegister(e) {
e.preventDefault();
const fd = new FormData(e.target);
const res = await fetch('/api/auth/register', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ name: fd.get('name'), email: fd.get('email'), password: fd.get('password') })
});
const body = await res.text();
show('register-out', res.status, body || '(empty body = account created; welcome email queued)');
}
async function doLogin(e) {
e.preventDefault();
const fd = new FormData(e.target);
const res = await fetch('/api/auth/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ email: fd.get('email'), password: fd.get('password') })
});
const body = await res.text();
if (res.ok) {
try {
jwt = JSON.parse(body).token;
sessionStorage.setItem('jwt', jwt);
renderToken();
} catch (err) { /* non-JSON body */ }
}
show('login-out', res.status, body);
}
async function doCurrent() {
if (!jwt) {
document.getElementById('current-out').textContent = 'Log in first to obtain a JWT.';
return;
}
const res = await fetch('/api/auth/current', {
headers: { 'Authorization': 'Bearer ' + jwt }
});
show('current-out', res.status, await res.text());
}
renderToken();
</script>
{% endraw %}
{% endblock js %}