120 lines
4.7 KiB
Svelte
120 lines
4.7 KiB
Svelte
<script lang="ts">
|
|
import { _ } from 'svelte-i18n';
|
|
import Header from '$lib/components/Header.svelte';
|
|
import LoadingSpinner from '$lib/components/uiElements/LoadingSpinner.svelte';
|
|
import { goto } from '$app/navigation';
|
|
import { base } from '$app/paths';
|
|
let changingPassword = false;
|
|
let passwordChange = {
|
|
currentPassword:"",
|
|
newPassword:"",
|
|
newPassword2:""
|
|
};
|
|
async function fetchUserData(): Promise<any> {
|
|
const token = localStorage.getItem('token');
|
|
const userInfoRequest = new Request(`/api/userInfo.php`, {
|
|
headers: { Authorization: `Bearer ${token}` }
|
|
});
|
|
const result = await fetch(userInfoRequest);
|
|
if (result.status == 401) {
|
|
goto(`${base}/login`);
|
|
}
|
|
if (!result.ok) {
|
|
throw new Error('Unable to fetch User Info');
|
|
}
|
|
|
|
const fetchedUserData = (await result.json()).user;
|
|
return fetchedUserData;
|
|
}
|
|
</script>
|
|
|
|
<Header />
|
|
<main class="flex items-center justify-center p-4 max-sm:p-0 bg-baby-powder dark:bg-gunmetal max-sm:h-full">
|
|
<figure
|
|
class="w-md rounded-xl sm:bg-gray-950/5 p-1 sm:inset-ring inset-ring-gray-950/5 sm:dark:bg-white/10 sm:dark:inset-ring-white/10 max-sm:w-full max-sm:p-0 max-sm:rounded-none max-sm:h-full"
|
|
>
|
|
<div
|
|
class="not-prose overflow-auto rounded-lg sm:bg-white p-2 sm:outline outline-white/5 sm:dark:bg-gunmetal-900/80 max-sm:rounded-none max-sm:h-full"
|
|
>
|
|
<h1 class="mb-4 text-center text-2xl font-bold dark:text-timberwolf">{$_('profile.title')}</h1>
|
|
{#await fetchUserData()}
|
|
<LoadingSpinner />
|
|
{:then userData}
|
|
<ul class="grid grid-cols-1 space-y-4">
|
|
<li class="mr-auto ml-auto w-xs rounded bg-white dark:bg-gunmetal dark:border dark:text-timberwolf p-4 shadow">
|
|
{$_('profile.user_display_name')}: {userData.userDisplayName}
|
|
</li>
|
|
<li class="mr-auto ml-auto w-xs rounded bg-white dark:bg-gunmetal dark:border dark:text-timberwolf p-4 shadow">
|
|
{$_('profile.user_name')}: {userData.userName}
|
|
</li>
|
|
{#if changingPassword}
|
|
<div class="mr-auto ml-auto w-xs rounded bg-gray-100 p-3">
|
|
<form>
|
|
<label class="block"
|
|
><span
|
|
class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
|
|
>Current Password</span
|
|
><input
|
|
id="currentPassword"
|
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
|
|
placeholder="***"
|
|
type="password"
|
|
name="currentPassword"
|
|
bind:value={passwordChange.currentPassword}
|
|
/></label
|
|
>
|
|
<label class="block"
|
|
><span
|
|
class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
|
|
>New Password</span
|
|
><input
|
|
id="newPassword"
|
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
|
|
placeholder="***"
|
|
type="password"
|
|
name="newPassword"
|
|
bind:value={passwordChange.newPassword}
|
|
/></label
|
|
>
|
|
<label class="block"
|
|
><span
|
|
class="block text-sm font-medium text-gray-700 after:ml-0.5 after:text-red-500 after:content-['*'] dark:text-white"
|
|
>Repeat new Password</span
|
|
><input
|
|
id="newPassword2"
|
|
class="mt-1 block w-full rounded-md border border-gray-300 px-3 py-2 placeholder-gray-400 shadow-sm focus:border-sky-500 focus:outline focus:outline-sky-500 sm:text-sm"
|
|
placeholder="***"
|
|
type="password"
|
|
name="newPassword2"
|
|
bind:value={passwordChange.newPassword}
|
|
/></label
|
|
>
|
|
<div class="w-full flex space space-x-1 pt-3">
|
|
<button type="button" class="w-1/2 cursor-pointer rounded bg-red-600 p-1 text-center text-white shadow hover:bg-red-400 active:bg-red-800"
|
|
on:click={()=>{changingPassword=false;}}>
|
|
Cancel
|
|
</button>
|
|
<button type="button" class="w-1/2 cursor-pointer rounded bg-blue-600 p-1 text-center text-white shadow hover:bg-blue-400 active:bg-blue-800">
|
|
Save
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
{:else}
|
|
<button
|
|
class="mr-auto ml-auto w-xs cursor-pointer rounded bg-forest-green-400 hover:bg-forest-green-500 dark:bg-forest-green-600 p-4 text-center text-gunmetal dark:hover:bg-forest-green-700 dark:hover:text-timberwolf shadow disabled:opacity-80"
|
|
on:click={() => {
|
|
changingPassword = true;
|
|
}}
|
|
>
|
|
Edit Password
|
|
</button>
|
|
{/if}
|
|
</ul>
|
|
{:catch exception}
|
|
{exception}
|
|
{/await}
|
|
</div>
|
|
</figure>
|
|
</main>
|