Hemera/nixie-ci
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add user-dropdown

Browse source 
Signed-off-by: Marcel Müller <neikos@neikos.email>
This commit is contained in:
Marcel Müller 2026-01-18 15:37:34 +01:00
parent 79305724f2
commit f45a43c852
7 changed files with 107 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

24
nixie-server/templates/base.tera.html
View file

@ -5,6 +5,7 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/starfederation/datastar@1.0.0-RC.7/bundles/datastar.js"></script>
{% block head %}
<title>{% block title %}{% endblock title%} - Nixie CI</title>
{% endblock head%}
@ -12,15 +13,32 @@
<body class="min-h-screen flex flex-col">
<nav class="bg-orange-300 px-2 py-2 inset-shadow-2xs border-b-2 border-orange-900">
<div class="mx-auto container flex select-none">
<div class="mx-auto container flex select-none space-x-4">
<a href="/" class="outline-2 outline-gray-800 bg-gray-700 rounded text-white p-2">
<span class="text-green-200">>_</span>
Nixie CI ❄️
</a>
<div></div>
<a href="/jobs/" class="outline-2 outline-cyan-800 bg-cyan-700 rounded text-white p-2">Jobs</a>
<div class="grow"></div>
<a href="/login" class="outline-2 outline-r-none hover:outline-emerald-900 outline-emerald-700 p-2 select-none rounded-l bg-emerald-600 text-white">Sign in</a>
<a href="/register" class="outline-2 hover:outline-emerald-900 outline-blue-700 p-2 select-none rounded-r bg-blue-600 text-white">Register</a>
{% if not logged_in %}
<a href="/login" class="outline-2 outline-r-none hover:outline-emerald-900 outline-emerald-700 p-2 select-none rounded-l bg-emerald-600 text-white">Sign in</a>
<a href="/register" class="outline-2 hover:outline-emerald-900 outline-blue-700 p-2 select-none rounded-r bg-blue-600 text-white">Register</a>
{% else %}
<div class="relative flex" data-on:click__outside="$openProfileDropdown = false">
<a href="/users/{{ current_user.id }}" class="inline-block border-2 border-r-1 hover:border-emerald-900 border-emerald-700 p-2 select-none rounded-l bg-emerald-600 text-white">
{{ current_user.username }}
</a>
<button data-on:click="$openProfileDropdown = !$openProfileDropdown"
class="border-2 border-l-1 hover:border-emerald-900 border-emerald-700 p-2 select-none rounded-r bg-emerald-600 text-white cursor-pointer">&#9660;</button>
<div data-class:hidden="!$openProfileDropdown"
class="hidden absolute top-[calc(100%+0.4rem)] right-0 bg-orange-300 p-2 rounded-b border border-orange-800 shadow-lg md:min-w-40 flex flex-col divide-y divide-orange-800">
<a class="block p-2 hover:bg-orange-800 hover:text-white" href="/users/{{ current_user.id }}">Profile</a>
<a class="block p-2 hover:bg-orange-800 hover:text-white" href="/logout">Logout</a>
</div>
</div>
{% endif %}
</div>
</nav>
<main class="grow px-2 flex flex-col inset-shadow-sm">

10
nixie-server/templates/index.tera.html Normal file
View file

@ -0,0 +1,10 @@
{% extends "base.tera.html" %}
{% import "inputs.tera.html" as inputs %}
{% block title %}
Home
{% endblock title %}
{% block content %}
Hi this is the main page
{% endblock content %}

28
nixie-server/templates/users/register.tera.html Normal file
View file

@ -0,0 +1,28 @@
{% extends "base.tera.html" %}
{% import "inputs.tera.html" as inputs %}
{% block title %}
Register
{% endblock title %}
{% block content %}
<div class="grow sm:flex justify-center items-center">
<div class="border-2 border-zinc-300 sm:rounded-2xl lg:rounded-4xl my-2 px-20 pb-14 pt-10 sm:shadow-lg space-y-4">
<h1 class="font-bold text-3xl">Login</h1>
<form action="/register" method="POST" class="space-y-4">
{{ inputs::text_input(label="Username", name="username", id="username") }}
{{ inputs::text_input(label="Password", name="password", id="password", type="password") }}
<div class="flex flex-col">
<button type="submit" class="bg-blue-500 p-2 rounded-lg text-white">
Register
</button>
</div>
<div class="flex flex-col">
<a href="/register" class="bg-zinc-500 p-2 rounded-lg text-white text-center">
Login
</a>
</div>
</form>
</div>
</div>
{% endblock content %}