add(ui): ability to log out
This commit is contained in:
trisua
parent
d2ca9e23d3
commit
b3cac5f97a
29 changed files with 499 additions and 124 deletions
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "auth/base.html" %} {% block head %}
|
||||
<title>Login</title>
|
||||
{% endblock %} {% block title %}Login{% endblock %} {% block content %}
|
||||
<form class="w-full flex flex-col gap-4">
|
||||
<form class="w-full flex flex-col gap-4" onsubmit="login(event)">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input
|
||||
|
|
@ -26,6 +26,35 @@
|
|||
|
||||
<button>Submit</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function login(e) {
|
||||
e.preventDefault();
|
||||
fetch("/api/v1/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({
|
||||
username: e.target.username.value,
|
||||
password: e.target.password.value,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "sucesss" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
if (res.ok) {
|
||||
setTimeout(() => {
|
||||
window.location.href = "/";
|
||||
}, 150);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %} {% block footer %}
|
||||
<span class="small w-full text-center"
|
||||
>Or, <a href="/auth/register">register</a></span
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
class="button {% if selected == 'home' %}active{% endif %}"
|
||||
>
|
||||
{{ icon "house" }}
|
||||
<span class="desktop">Home</span>
|
||||
<span class="desktop">{{ text "general:link.home" }}</span>
|
||||
</a>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
|
@ -30,6 +30,20 @@
|
|||
{{ macros::avatar(username=user.username, size="24px") }}
|
||||
{{ icon "chevron-down" c(dropdown-arrow) }}
|
||||
</button>
|
||||
|
||||
<div class="inner">
|
||||
<b class="title">{{ user.username }}</b>
|
||||
<a href="/@{{ user.username }}">
|
||||
{{ icon "book-heart" }}
|
||||
<span>{{ text "auth:link.my_profile" }}</span>
|
||||
</a>
|
||||
|
||||
<div class="title"></div>
|
||||
<button class="red" onclick="trigger('me::logout')">
|
||||
{{ icon "log-out" }}
|
||||
<span>{{ text "auth:action.logout" }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="dropdown">
|
||||
|
|
@ -44,11 +58,11 @@
|
|||
<div class="inner">
|
||||
<a href="/auth/login" class="button">
|
||||
{{ icon "log-in" }}
|
||||
<span>Login</span>
|
||||
<span>{{ text "auth:action.login" }}</span>
|
||||
</a>
|
||||
<a href="/auth/register" class="button">
|
||||
{{ icon "user-plus" }}
|
||||
<span>Register</span>
|
||||
<span>{{ text "auth:action.register" }}</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,22 +2,12 @@
|
|||
{{ macros::nav(selected="home") }}
|
||||
|
||||
<main class="flex flex-col gap-2">
|
||||
<h1>Hello, world!</h1>
|
||||
|
||||
<div class="pillmenu">
|
||||
<a class="active" href="#">A</a>
|
||||
<a href="#">B</a>
|
||||
<a href="#">C</a>
|
||||
</div>
|
||||
|
||||
<div class="card w-full flex flex-col gap-2">
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button>Hello, world!</button>
|
||||
<button class="secondary">Hello, world!</button>
|
||||
<button class="camo">Hello, world!</button>
|
||||
<div class="card-nest">
|
||||
<div class="card">
|
||||
<b>✨ Welcome to <i>{{ config.name }}</i>!</b>
|
||||
</div>
|
||||
|
||||
<input type="text" placeholder="abcd" />
|
||||
<div class="card">We're still working on your feed...</div>
|
||||
</div>
|
||||
</main>
|
||||
{% endblock %}
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
globalThis.ns_config = {
|
||||
root: "/js/",
|
||||
verbose: globalThis.ns_verbose,
|
||||
version: "cache-breaker-{{ random_cache_breaker }}",
|
||||
};
|
||||
|
||||
globalThis._app_base = {
|
||||
|
|
@ -76,5 +77,141 @@
|
|||
atto["hooks::partial_embeds"]();
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- dialogs -->
|
||||
<dialog id="link_filter">
|
||||
<div class="inner">
|
||||
<p>Pressing continue will bring you to the following URL:</p>
|
||||
<pre><code id="link_filter_url"></code></pre>
|
||||
<p>Are sure you want to go there?</p>
|
||||
|
||||
<hr />
|
||||
<div class="flex gap-2">
|
||||
<a
|
||||
class="button primary bold"
|
||||
id="link_filter_continue"
|
||||
rel="noopener noreferrer"
|
||||
target="_blank"
|
||||
onclick="document.getElementById('link_filter').close()"
|
||||
>
|
||||
{{ text "dialog:action.continue" }}
|
||||
</a>
|
||||
<button
|
||||
class="bold"
|
||||
type="button"
|
||||
onclick="document.getElementById('link_filter').close()"
|
||||
>
|
||||
{{ text "dialog:action.cancel" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="web_api_prompt">
|
||||
<div class="inner flex flex-col gap-2">
|
||||
<form
|
||||
class="flex gap-2 flex-col"
|
||||
onsubmit="event.preventDefault()"
|
||||
>
|
||||
<label for="prompt" id="web_api_prompt:msg"></label>
|
||||
<input id="prompt" name="prompt" />
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div></div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="primary bold circle"
|
||||
onclick="globalThis.web_api_prompt_submit(document.getElementById('prompt').value); document.getElementById('prompt').value = ''"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "check" }} {{ text "dialog:action.okay"
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bold red camo"
|
||||
onclick="globalThis.web_api_prompt_submit('')"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "x" }} {{ text "dialog:action.cancel" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="web_api_prompt_long">
|
||||
<div class="inner flex flex-col gap-2">
|
||||
<form
|
||||
class="flex gap-2 flex-col"
|
||||
onsubmit="event.preventDefault()"
|
||||
>
|
||||
<label
|
||||
for="prompt_long"
|
||||
id="web_api_prompt_long:msg"
|
||||
></label>
|
||||
<textarea id="prompt_long" name="prompt_long"></textarea>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div></div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="primary bold circle"
|
||||
onclick="globalThis.web_api_prompt_long_submit(document.getElementById('prompt_long').value); document.getElementById('prompt_long').value = ''"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "check" }} {{ text "dialog:action.okay"
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bold red camo"
|
||||
onclick="globalThis.web_api_prompt_long_submit('')"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "x" }} {{ text "dialog:action.cancel" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog id="web_api_confirm">
|
||||
<div class="inner flex flex-col gap-2">
|
||||
<form
|
||||
class="flex gap-2 flex-col"
|
||||
onsubmit="event.preventDefault()"
|
||||
>
|
||||
<label id="web_api_confirm:msg"></label>
|
||||
|
||||
<div class="flex justify-between">
|
||||
<div></div>
|
||||
|
||||
<div class="flex gap-2">
|
||||
<button
|
||||
class="primary bold circle"
|
||||
onclick="globalThis.web_api_confirm_submit(true)"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "check" }} {{ text "dialog:action.yes"
|
||||
}}
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="bold red camo"
|
||||
onclick="globalThis.web_api_confirm_submit(false)"
|
||||
type="button"
|
||||
>
|
||||
{{ icon "x" }} {{ text "dialog:action.no" }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</dialog>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue