Updated to Svelte 5
This commit is contained in:
@@ -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')}
|
||||
|
||||
Reference in New Issue
Block a user