add: user totp 2fa
This commit is contained in:
trisua
parent
20aae5570b
commit
205fcbdcc1
29 changed files with 699 additions and 116 deletions
|
|
@ -2,34 +2,68 @@
|
|||
<title>Login</title>
|
||||
{% endblock %} {% block title %}Login{% endblock %} {% block content %}
|
||||
<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
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
name="username"
|
||||
id="username"
|
||||
/>
|
||||
<div id="flow_1" style="display: contents">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username"><b>Username</b></label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="username"
|
||||
required
|
||||
name="username"
|
||||
id="username"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username"><b>Password</b></label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
required
|
||||
name="password"
|
||||
id="password"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="username"><b>Password</b></label>
|
||||
<input
|
||||
type="password"
|
||||
placeholder="password"
|
||||
required
|
||||
name="password"
|
||||
id="password"
|
||||
/>
|
||||
<div id="flow_2" style="display: none">
|
||||
<div class="flex flex-col gap-1">
|
||||
<label for="totp"><b>TOTP code</b></label>
|
||||
<input type="text" placeholder="totp code" name="totp" id="totp" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button>Submit</button>
|
||||
</form>
|
||||
|
||||
<script>
|
||||
function login(e) {
|
||||
let flow_page = 1;
|
||||
|
||||
function next_page() {
|
||||
document.getElementById(`flow_${flow_page}`).style.display = "none";
|
||||
flow_page += 1;
|
||||
document.getElementById(`flow_${flow_page}`).style.display = "contents";
|
||||
}
|
||||
|
||||
async function login(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (flow_page === 1) {
|
||||
// check if we need TOTP
|
||||
const res = await (
|
||||
await fetch(
|
||||
`/api/v1/auth/user/${e.target.username.value}/totp/check`,
|
||||
)
|
||||
).json();
|
||||
|
||||
trigger("atto::toast", [res.ok ? "success" : "error", res.message]);
|
||||
|
||||
if (res.ok && res.payload) {
|
||||
// user exists AND totp is required
|
||||
return next_page();
|
||||
}
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -38,6 +72,7 @@
|
|||
body: JSON.stringify({
|
||||
username: e.target.username.value,
|
||||
password: e.target.password.value,
|
||||
totp: e.target.totp.value,
|
||||
}),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
|
|
|
|||
|
|
@ -416,7 +416,7 @@
|
|||
|
||||
// ...
|
||||
element.innerHTML = `<div class="flex gap-2 flex-wrap" ui_ident="actions">
|
||||
<a target="_blank" class="button" href="/api/v1/auth/profile/find/${e.target.uid.value}">Open user profile</a>
|
||||
<a target="_blank" class="button" href="/api/v1/auth/user/find/${e.target.uid.value}">Open user profile</a>
|
||||
${res.payload.role !== 33 ? `<button class="red quaternary" onclick="update_user_role('${e.target.uid.value}', 33)">Ban</button>` : `<button class="quaternary" onclick="update_user_role('${e.target.uid.value}', 5)">Unban</button>`}
|
||||
${res.payload.role !== 65 ? `<button class="red quaternary" onclick="update_user_role('${e.target.uid.value}', 65)">Send to review</button>` : `<button class="green quaternary" onclick="update_user_role('${e.target.uid.value}', 5)">Accept join request</button>`}
|
||||
<button class="red quaternary" onclick="kick_user('${e.target.uid.value}')">Kick</button>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
{% macro avatar(username, size="24px", selector_type="username") -%}
|
||||
<img
|
||||
title="{{ username }}'s avatar"
|
||||
src="/api/v1/auth/profile/{{ username }}/avatar?selector_type={{ selector_type }}"
|
||||
src="/api/v1/auth/user/{{ username }}/avatar?selector_type={{ selector_type }}"
|
||||
alt="@{{ username }}"
|
||||
class="avatar shadow"
|
||||
loading="lazy"
|
||||
|
|
@ -28,7 +28,7 @@
|
|||
border_radius="var(--radius)") -%}
|
||||
<img
|
||||
title="{{ username }}'s banner"
|
||||
src="/api/v1/auth/profile/{{ username }}/banner"
|
||||
src="/api/v1/auth/user/{{ username }}/banner"
|
||||
alt="@{{ username }}'s banner"
|
||||
class="banner shadow"
|
||||
loading="lazy"
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card-nest">
|
||||
<a
|
||||
class="card small flex items-center gap-2 flush"
|
||||
href="/api/v1/auth/profile/find/{{ item.moderator }}"
|
||||
href="/api/v1/auth/user/find/{{ item.moderator }}"
|
||||
>
|
||||
<!-- prettier-ignore -->
|
||||
{{ components::avatar(username=item.moderator, selector_type="id") }}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card-nest">
|
||||
<a
|
||||
class="card small flex items-center gap-2 flush"
|
||||
href="/api/v1/auth/profile/find/{{ item.moderator }}"
|
||||
href="/api/v1/auth/user/find/{{ item.moderator }}"
|
||||
>
|
||||
<!-- prettier-ignore -->
|
||||
{{ components::avatar(username=item.moderator, selector_type="id") }}
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="card-nest">
|
||||
<a
|
||||
class="card small flex items-center gap-2 flush"
|
||||
href="/api/v1/auth/profile/find/{{ item.owner }}"
|
||||
href="/api/v1/auth/user/find/{{ item.owner }}"
|
||||
>
|
||||
<!-- prettier-ignore -->
|
||||
{{ components::avatar(username=item.owner, selector_type="id") }}
|
||||
|
|
|
|||
|
|
@ -131,7 +131,7 @@
|
|||
<script>
|
||||
globalThis.toggle_follow_user = () => {
|
||||
fetch(
|
||||
"/api/v1/auth/profile/{{ profile.id }}/follow",
|
||||
"/api/v1/auth/user/{{ profile.id }}/follow",
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
|
|
@ -155,7 +155,7 @@
|
|||
}
|
||||
|
||||
fetch(
|
||||
"/api/v1/auth/profile/{{ profile.id }}/block",
|
||||
"/api/v1/auth/user/{{ profile.id }}/block",
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
|
|
@ -264,7 +264,7 @@
|
|||
}
|
||||
|
||||
fetch(
|
||||
`/api/v1/auth/profile/{{ profile.id }}/${path}`,
|
||||
`/api/v1/auth/user/{{ profile.id }}/${path}`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
@ -295,7 +295,7 @@
|
|||
}
|
||||
|
||||
fetch(
|
||||
"/api/v1/auth/profile/{{ profile.id }}",
|
||||
"/api/v1/auth/user/{{ profile.id }}",
|
||||
{
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
|
|
@ -328,7 +328,7 @@
|
|||
}
|
||||
|
||||
fetch(
|
||||
`/api/v1/auth/profile/{{ profile.id }}/role`,
|
||||
`/api/v1/auth/user/{{ profile.id }}/role`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: {
|
||||
|
|
|
|||
|
|
@ -100,6 +100,60 @@
|
|||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div class="card-nest" ui_ident="two_factor_authentication">
|
||||
<div class="card small">
|
||||
<b>{{ text "settings:label.two_factor_authentication" }}</b>
|
||||
</div>
|
||||
|
||||
<div class="card flex flex-col gap-2">
|
||||
{% if profile.totp|length == 0 %}
|
||||
<div id="totp_stuff" style="display: none">
|
||||
<span
|
||||
>Scan this QR code in a TOTP authenticator app (like
|
||||
Google Authenticator):
|
||||
</span>
|
||||
|
||||
<img id="totp_qr" style="max-width: 250px" />
|
||||
|
||||
<span>TOTP secret (do NOT share):</span>
|
||||
<pre id="totp_secret"></pre>
|
||||
|
||||
<span
|
||||
>Recovery codes (STORE SAFELY, these can only be
|
||||
viewed once):</span
|
||||
>
|
||||
|
||||
<pre id="totp_recovery_codes"></pre>
|
||||
</div>
|
||||
|
||||
<button
|
||||
class="quaternary green"
|
||||
onclick="enable_totp(event)"
|
||||
>
|
||||
Enable TOTP 2FA
|
||||
</button>
|
||||
{% else %}
|
||||
<pre id="totp_recovery_codes" style="display: none"></pre>
|
||||
|
||||
<div class="flex gap-2 flex-wrap">
|
||||
<button
|
||||
class="quaternary red"
|
||||
onclick="refresh_totp_codes(event)"
|
||||
>
|
||||
Refresh recovery codes
|
||||
</button>
|
||||
|
||||
<button
|
||||
class="quaternary red"
|
||||
onclick="disable_totp(event)"
|
||||
>
|
||||
Disable TOTP 2FA
|
||||
</button>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-nest" ui_ident="change_password">
|
||||
|
|
@ -244,8 +298,7 @@
|
|||
{% if is_helper %}
|
||||
<span class="flex gap-2 items-center">
|
||||
<span class="fade"
|
||||
><a
|
||||
href="/api/v1/auth/profile/find_by_ip/{{ token[0] }}"
|
||||
><a href="/api/v1/auth/user/find_by_ip/{{ token[0] }}"
|
||||
><code>{{ token[0] }}</code></a
|
||||
></span
|
||||
>
|
||||
|
|
@ -296,7 +349,7 @@
|
|||
tokens = new_tokens;
|
||||
|
||||
// send request to save
|
||||
fetch("/api/v1/auth/profile/{{ profile.id }}/tokens", {
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/tokens", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -313,7 +366,7 @@
|
|||
};
|
||||
|
||||
globalThis.save_settings = () => {
|
||||
fetch("/api/v1/auth/profile/{{ profile.id }}/settings", {
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/settings", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -331,7 +384,7 @@
|
|||
|
||||
globalThis.change_password = (e) => {
|
||||
e.preventDefault();
|
||||
fetch("/api/v1/auth/profile/{{ profile.id }}/password", {
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/password", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -361,7 +414,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/profile/{{ profile.id }}/username", {
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/username", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -390,7 +443,7 @@
|
|||
return;
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/profile/{{ profile.id }}", {
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}", {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
|
|
@ -454,6 +507,117 @@
|
|||
alert("Banner upload in progress. Please wait!");
|
||||
};
|
||||
|
||||
globalThis.enable_totp = async (event) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you want to do this? You must have access to your TOTP codes to disable TOTP.",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/user/{{ user.id }}/totp", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
const [secret, qr, recovery_codes] = res.payload;
|
||||
|
||||
document.getElementById("totp_secret").innerText =
|
||||
secret;
|
||||
document.getElementById("totp_qr").src =
|
||||
`data:image/png;base64,${qr}`;
|
||||
document.getElementById(
|
||||
"totp_recovery_codes",
|
||||
).innerText = recovery_codes.join("\n");
|
||||
|
||||
document.getElementById("totp_stuff").style.display =
|
||||
"contents";
|
||||
event.target.remove();
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.disable_totp = async (event) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you want to do this?",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const totp_code = await trigger("atto::prompt", ["TOTP code:"]);
|
||||
|
||||
if (!totp_code) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/totp", {
|
||||
method: "DELETE",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ totp: totp_code }),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
event.target.remove();
|
||||
});
|
||||
};
|
||||
|
||||
globalThis.refresh_totp_codes = async (event) => {
|
||||
if (
|
||||
!(await trigger("atto::confirm", [
|
||||
"Are you sure you want to do this? The old codes will no longer work.",
|
||||
]))
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const totp_code = await trigger("atto::prompt", ["TOTP code:"]);
|
||||
|
||||
if (!totp_code) {
|
||||
return;
|
||||
}
|
||||
|
||||
fetch("/api/v1/auth/user/{{ profile.id }}/totp/codes", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({ totp: totp_code }),
|
||||
})
|
||||
.then((res) => res.json())
|
||||
.then((res) => {
|
||||
trigger("atto::toast", [
|
||||
res.ok ? "success" : "error",
|
||||
res.message,
|
||||
]);
|
||||
|
||||
document.getElementById(
|
||||
"totp_recovery_codes",
|
||||
).innerText = res.payload.join("\n");
|
||||
document.getElementById(
|
||||
"totp_recovery_codes",
|
||||
).style.display = "block";
|
||||
|
||||
event.target.remove();
|
||||
});
|
||||
};
|
||||
|
||||
const account_settings =
|
||||
document.getElementById("account_settings");
|
||||
const profile_settings =
|
||||
|
|
@ -462,6 +626,7 @@
|
|||
ui.refresh_container(account_settings, [
|
||||
"change_password",
|
||||
"change_username",
|
||||
"two_factor_authentication",
|
||||
]);
|
||||
ui.refresh_container(profile_settings, [
|
||||
"theme_preference",
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue