Updated to Svelte 5

This commit is contained in:
Mawoka
2025-09-21 12:42:04 +02:00
parent fa533257b3
commit a88cf13f82
137 changed files with 2279 additions and 1948 deletions
@@ -5,6 +5,8 @@ SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import { run, preventDefault } from 'svelte/legacy';
import { getLocalization } from '$lib/i18n';
import { DateTime } from 'luxon';
import { UAParser } from 'ua-parser-js';
@@ -28,16 +30,16 @@ SPDX-License-Identifier: MPL-2.0
newPasswordConfirm: string;
}
let changePasswordData: ChangePasswordData = {
let changePasswordData: ChangePasswordData = $state({
oldPassword: '',
newPassword: '',
newPasswordConfirm: ''
};
});
let locationData;
let this_session;
let this_session = $state();
let passwordChangeDataValid = false;
let passwordChangeDataValid = $state(false);
const checkPasswords = (data: ChangePasswordData): void => {
passwordChangeDataValid =
data.newPassword === data.newPasswordConfirm &&
@@ -45,7 +47,9 @@ SPDX-License-Identifier: MPL-2.0
data.oldPassword !== data.newPassword &&
data.oldPassword !== '';
};
$: checkPasswords(changePasswordData);
run(() => {
checkPasswords(changePasswordData);
});
const changePassword = async () => {
if (!passwordChangeDataValid) {
return;
@@ -93,7 +97,7 @@ SPDX-License-Identifier: MPL-2.0
return api_keys_temp;
};
let api_keys;
let api_keys = $state();
const add_api_key = async () => {
await fetch('/api/v1/users/api_keys', { method: 'POST' });
@@ -180,7 +184,7 @@ SPDX-License-Identifier: MPL-2.0
</div>
</div>
<div>
<form class="flex flex-col md:flex-row" on:submit|preventDefault={changePassword}>
<form class="flex flex-col md:flex-row" onsubmit={preventDefault(changePassword)}>
<label
>{$t('settings_page.old_password')}:<input
type="password"
@@ -296,7 +300,7 @@ SPDX-License-Identifier: MPL-2.0
class="py-4 px-6 text-sm text-gray-500 whitespace-nowrap dark:text-gray-400"
>
<button
on:click={() => {
onclick={() => {
deleteSession(session.id);
}}>{$t('words.delete')}</button
>
@@ -5,6 +5,8 @@ SPDX-License-Identifier: MPL-2.0
-->
<script lang="ts">
import { run } from 'svelte/legacy';
import BrownButton from '$lib/components/buttons/brown.svelte';
import { fade, fly } from 'svelte/transition';
import { bounceOut } from 'svelte/easing';
@@ -43,7 +45,7 @@ SPDX-License-Identifier: MPL-2.0
clothe_graphic_type: $t('avatar_settings.clothe_graphic_type')
};
let data = {
let data = $state({
skin_color: 0,
top_type: 0,
hair_color: 0,
@@ -56,21 +58,22 @@ SPDX-License-Identifier: MPL-2.0
clothe_type: 0,
clothe_color: 0,
clothe_graphic_type: 0
};
});
const data_keys = Object.keys(data);
let index = 0;
let index = $state(0);
// let index = 10;
let save_finished: undefined | boolean = undefined;
let finished = false;
let image_url;
$: console.log('index', index);
let save_finished: undefined | boolean = $state(undefined);
let finished = $state(false);
const get_image_url = (input_data) => {
return `/api/v1/avatar/custom?${new URLSearchParams(input_data).toString()}`;
};
$: image_url = get_image_url(data);
let image_url = $derived(get_image_url(data));
run(() => {
console.log('index', index);
});
const save_avatar = async () => {
save_finished = false;
@@ -111,7 +114,7 @@ SPDX-License-Identifier: MPL-2.0
{#each Array.from(Array(item_count[data_keys[index]]).keys()) as key}
<button
class="hover:opacity-80 transition-all"
on:click={() => {
onclick={() => {
data[data_keys[index]] = key;
if (index < 11) {
index++;
@@ -15,11 +15,11 @@ SPDX-License-Identifier: MPL-2.0
const { t } = getLocalization();
let user_data: object | undefined;
let security_keys: Array<{ id: number }> | undefined;
let totp_activated: boolean | undefined;
let totp_data;
let backup_code;
let user_data: object | undefined = $state();
let security_keys: Array<{ id: number }> | undefined = $state();
let totp_activated: boolean | undefined = $state();
let totp_data = $state();
let backup_code = $state();
const get_data = async () => {
const res1 = await fetch('/api/v1/users/me');
@@ -29,7 +29,7 @@ SPDX-License-Identifier: MPL-2.0
const res3 = await fetch('/api/v1/users/2fa/totp');
totp_activated = (await res3.json()).activated;
};
let data = get_data();
let data = $state(get_data());
const save_password_required = async () => {
console.log(user_data?.require_password, 'here');
@@ -47,12 +47,13 @@ SPDX-License-Identifier: MPL-2.0
user_data.require_password = (await res.json()).require_password;
};
const require_password = (): string => {
const require_password = (): string | null => {
return prompt('Please enter your password to continue');
};
const add_security_key = async () => {
const pw = require_password();
if (!pw) return;
const res1 = await fetch('/api/v1/users/webauthn/add_key_init', {
method: 'POST',
body: JSON.stringify({ password: pw }),
@@ -89,6 +90,7 @@ SPDX-License-Identifier: MPL-2.0
const remove_security_key = async (key_id: number) => {
const pw = require_password();
if (!pw) return;
const res = await fetch(`/api/v1/users/webauthn/key/${key_id}`, {
method: 'DELETE',
body: JSON.stringify({ password: pw }),
@@ -103,6 +105,7 @@ SPDX-License-Identifier: MPL-2.0
const disable_totp = async () => {
const pw = require_password();
if (!pw) return;
const res = await fetch(`/api/v1/users/2fa/totp`, {
method: 'DELETE',
body: JSON.stringify({ password: pw }),
@@ -117,6 +120,7 @@ SPDX-License-Identifier: MPL-2.0
const enable_totp = async () => {
const pw = require_password();
if (!pw) return;
const res = await fetch('/api/v1/users/2fa/totp', {
method: 'POST',
body: JSON.stringify({ password: pw }),
@@ -132,6 +136,7 @@ SPDX-License-Identifier: MPL-2.0
const get_backup_code = async () => {
const pw = require_password();
if (!pw) return;
if (!confirm('If you continue, your old backup-code will be removed.')) {
return;
}
@@ -176,7 +181,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="flex items-center space-x-2">
<button
disabled={!totp_activated}
on:click={() => {
onclick={() => {
user_data.require_password = !user_data.require_password;
save_password_required();
}}
@@ -188,7 +193,7 @@ SPDX-License-Identifier: MPL-2.0
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-3 rounded-full bg-white transition will-change-transform"
/>
></span>
</button>
<span class="text-sm font-medium text-gray-700 dark:text-white"
>{$t('security_settings.2fa_activated')}</span
@@ -199,7 +204,7 @@ SPDX-License-Identifier: MPL-2.0
<button
disabled={!totp_activated}
type="button"
on:click={() => {
onclick={() => {
user_data.require_password = !user_data.require_password;
save_password_required();
}}
@@ -210,7 +215,7 @@ SPDX-License-Identifier: MPL-2.0
<span
aria-hidden="true"
class="pointer-events-none inline-block h-4 w-4 translate-x-0 rounded-full bg-white transition will-change-transform"
/>
></span>
</button>
<span class="text-sm font-medium text-gray-700 dark:text-white"
>{$t('security_settings.2fa_deactivated')}</span
@@ -243,7 +248,7 @@ SPDX-License-Identifier: MPL-2.0
{#each security_keys as key, i}
<li>
<button
on:click={() => {
onclick={() => {
remove_security_key(key.id);
}}
class="hover:line-through transition">{i + 1}</button
@@ -8,7 +8,7 @@ SPDX-License-Identifier: MPL-2.0
import { getLocalization } from '$lib/i18n';
const { t } = getLocalization();
export let backup_code;
let { backup_code = $bindable() } = $props();
let already_downloaded = false;
@@ -31,7 +31,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="w-full h-full">
<button
class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
on:click={() => {
onclick={() => {
backup_code = undefined;
}}
>{$t('words.close')}
@@ -42,7 +42,7 @@ SPDX-License-Identifier: MPL-2.0
<h2 class="text-3xl m-auto">{$t('security_settings.backup_codes.your_backup_code')}</h2>
<p
class="select-all font-mono text-xl m-auto"
on:click={() => {
onclick={() => {
download_code(false);
}}
>
@@ -50,7 +50,7 @@ SPDX-License-Identifier: MPL-2.0
</p>
<p class="m-auto">{$t('security_settings.backup_codes.save_somewhere_save')}</p>
<button
on:click={() => {
onclick={() => {
download_code(true);
}}
class="m-auto p-2 bg-[#B07156] rounded-lg"
@@ -11,7 +11,11 @@ SPDX-License-Identifier: MPL-2.0
const { t } = getLocalization();
export let totp_data: { url: string; secret: string } | undefined;
interface Props {
totp_data: { url: string; secret: string } | undefined;
}
let { totp_data = $bindable() }: Props = $props();
const get_image_url = async () => {
return await QRCode.toDataURL(totp_data.url);
@@ -22,7 +26,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="w-full h-full">
<button
class="bg-gray-200 dark:bg-gray-900 px-2 py-1 rounded-t-lg hover:bg-gray-300 transition"
on:click={() => {
onclick={() => {
totp_data = undefined;
}}
>{$t('words.close')}
@@ -30,7 +34,7 @@ SPDX-License-Identifier: MPL-2.0
<div class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full">
<div class="grid grid-cols-3 w-full h-full">
<div class="flex flex-col justify-center w-full h-5/6">
<span class="m-auto" />
<span class="m-auto"></span>
<div class="h-5/6 flex">
<p class="my-auto ml-auto">
{$t('security_settings.totp_setup.scan_to_set_up')}