133 lines
3.1 KiB
Svelte
133 lines
3.1 KiB
Svelte
<script lang="ts">
|
|
import { goto } from '$app/navigation';
|
|
import { userStore } from 'src/routes/UserStore.svelte';
|
|
import { onMount } from 'svelte';
|
|
|
|
import 'src/styles/forms.css';
|
|
import { post } from 'src/lib/requests.svelte';
|
|
import MessageSimple, { type DisplayFn } from 'src/lib/MessageSimple.svelte';
|
|
import TokenTable from './TokenTable.svelte';
|
|
import DeleteUser from './DeleteUser.svelte';
|
|
|
|
onMount(() => {
|
|
if (!userStore.isLogin()) {
|
|
goto('/login');
|
|
}
|
|
});
|
|
|
|
let email = $state(userStore.user?.email ?? '');
|
|
|
|
let passwordData = $state({
|
|
old_password: '',
|
|
password: '',
|
|
password2: ''
|
|
});
|
|
|
|
let submiitedEmail = $state(false);
|
|
let submiitedPassword = $state(false);
|
|
|
|
let msgEmail: MessageSimple;
|
|
let msgPassword: MessageSimple;
|
|
|
|
async function onSubmitEmail() {
|
|
submiitedEmail = true;
|
|
msgEmail.display('');
|
|
|
|
if (!userStore.user) return;
|
|
|
|
try {
|
|
let req = await post('user/info', {
|
|
id: userStore.user.id,
|
|
email: email
|
|
});
|
|
userStore.user = {
|
|
...userStore.user,
|
|
...req
|
|
};
|
|
msgEmail.display('User updated successufly!', { type: 'success', timeToShow: 10000 });
|
|
} catch (e) {
|
|
if (e instanceof Response) {
|
|
msgEmail.display(await e.json());
|
|
} else {
|
|
msgEmail.display('Could not update email');
|
|
}
|
|
}
|
|
}
|
|
|
|
async function onSubmitPassword() {
|
|
submiitedPassword = true;
|
|
msgPassword.display('');
|
|
if (!userStore.user) return;
|
|
|
|
try {
|
|
await post('user/info/password', passwordData);
|
|
passwordData = { old_password: '', password: '', password2: '' };
|
|
msgPassword.display('Password updated successufly!', { type: 'success', timeToShow: 10000 });
|
|
} catch (e) {
|
|
if (e instanceof Response) {
|
|
msgPassword.display(await e.json());
|
|
} else {
|
|
msgPassword.display('Could not update password');
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<svelte:head>
|
|
<title>User Info</title>
|
|
</svelte:head>
|
|
|
|
<div class="login-page">
|
|
<div>
|
|
<h1>User Infomation</h1>
|
|
<form on:submit|preventDefault={onSubmitEmail} class:submiitedEmail>
|
|
<fieldset>
|
|
<label for="email">Email</label>
|
|
<input type="email" required name="email" bind:value={email} />
|
|
</fieldset>
|
|
<MessageSimple bind:this={msgEmail} />
|
|
<button> Update </button>
|
|
</form>
|
|
<form on:submit|preventDefault={onSubmitPassword} class:submiitedPassword>
|
|
<fieldset>
|
|
<label for="old_password">Old Password</label>
|
|
<input
|
|
required
|
|
bind:value={passwordData.old_password}
|
|
name="old_password"
|
|
type="password"
|
|
/>
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="password">New Password</label>
|
|
<input required bind:value={passwordData.password} name="password" type="password" />
|
|
</fieldset>
|
|
<fieldset>
|
|
<label for="password2">Repeat New Password</label>
|
|
<input required bind:value={passwordData.password2} name="password2" type="password" />
|
|
</fieldset>
|
|
<MessageSimple bind:this={msgPassword} />
|
|
<div>
|
|
<button> Update </button>
|
|
</div>
|
|
</form>
|
|
<TokenTable />
|
|
<DeleteUser />
|
|
</div>
|
|
</div>
|
|
|
|
<style lang="scss">
|
|
/* Login Page */
|
|
.login-page {
|
|
display: grid;
|
|
place-items: center;
|
|
margin-bottom: 40px;
|
|
& > div {
|
|
width: 40vw;
|
|
}
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
}
|
|
</style>
|