308 lines
13 KiB
Svelte
308 lines
13 KiB
Svelte
<script>
|
|
import { _ } from "svelte-i18n";
|
|
import isEmail from "validator/es/lib/isEmail";
|
|
import { MeService } from "@odit/lfk-client-js";
|
|
|
|
import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
|
|
import PasswordStrength, {
|
|
password_strong_enough_and_equal,
|
|
} from "../auth/PasswordStrength.svelte";
|
|
$: data_loaded = false;
|
|
$: delete_triggered = false;
|
|
$: original_data = {};
|
|
$: editable = {};
|
|
$: modal_open = false;
|
|
$: password_change = "";
|
|
$: password_confirm = "";
|
|
$: changes_performed = !(
|
|
JSON.stringify(editable) === JSON.stringify(original_data)
|
|
);
|
|
$: save_enabled = changes_performed && isEmail(editable.email);
|
|
$: update_password_enabled = password_strong_enough_and_equal(
|
|
password_change,
|
|
password_confirm
|
|
);
|
|
const user_promise = MeService.meControllerGet().then((data) => {
|
|
data_loaded = true;
|
|
data.groups = data.groups.map((g) => g.id);
|
|
data.permissions = [0];
|
|
original_data = Object.assign(original_data, data);
|
|
editable = Object.assign(editable, original_data);
|
|
});
|
|
function submit() {
|
|
if (data_loaded === true && save_enabled) {
|
|
toast($_("updating-your-profile"));
|
|
MeService.meControllerPut(editable)
|
|
.then((resp) => {
|
|
original_data = Object.assign(original_data, editable);
|
|
toast.success($_("profile-updated"));
|
|
})
|
|
.catch((err) => {});
|
|
}
|
|
}
|
|
function changePassword() {
|
|
if (data_loaded === true && update_password_enabled) {
|
|
toast($_("changing-your-password"));
|
|
let postdata = Object.assign({}, original_data);
|
|
postdata.password = password_confirm;
|
|
MeService.meControllerPut(postdata)
|
|
.then((resp) => {
|
|
password_confirm = "";
|
|
password_change = "";
|
|
postdata = {};
|
|
toast.success($_("password-changed"));
|
|
setTimeout(() => {
|
|
location.replace("./");
|
|
}, 500);
|
|
})
|
|
.catch((err) => {});
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<ConfirmProfileDeletion bind:modal_open bind:delete_triggered />
|
|
<div class="pt-12 px-4 sm:px-6 lg:px-8 lg:pt-20 bg-gray-900 pb-12">
|
|
<div class="text-center mb-8">
|
|
<h1
|
|
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
|
>
|
|
🔨<br />{$_("settings")}
|
|
</h1>
|
|
</div>
|
|
</div>
|
|
<div class="pt-0 pb-16 bg-gray-50 overflow-hidden lg:pt-12 lg:py-24">
|
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<div>
|
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
|
<div class="md:col-span-1">
|
|
<div class="px-4 sm:px-0">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
|
{$_("profile")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
{$_("everything-concerning-your-profile")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{#await user_promise}
|
|
{$_("loading-profile-data")}
|
|
{:then}
|
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
|
<div class="px-4 py-5 bg-white space-y-6 sm:p-6">
|
|
<div class="text-sm w-full">
|
|
<label for="username" class="font-medium text-gray-700"
|
|
>{$_("username")}</label
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
placeholder={$_("username")}
|
|
type="text"
|
|
bind:value={editable.username}
|
|
name="username"
|
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
/>
|
|
</div>
|
|
<div class="text-sm w-full">
|
|
<label for="email" class="font-medium text-gray-700"
|
|
>{$_("e-mail-adress")}</label
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
placeholder={$_("e-mail-adress")}
|
|
type="email"
|
|
bind:value={editable.email}
|
|
name="email"
|
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
/>
|
|
</div>
|
|
{#if !isEmail(editable.email)}
|
|
<span
|
|
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1"
|
|
>{$_("valid-email-is-required")}</span
|
|
>
|
|
{/if}
|
|
<div class="text-sm w-full">
|
|
<label for="firstname" class="font-medium text-gray-700"
|
|
>{$_("first-name")}</label
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
placeholder={$_("first-name")}
|
|
type="text"
|
|
bind:value={editable.firstname}
|
|
name="firstname"
|
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
/>
|
|
</div>
|
|
<!-- <div class="text-sm w-full">
|
|
<label for="middlename" class="font-medium text-gray-700"
|
|
>{$_("middle-name")}</label
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
placeholder={$_("middle-name")}
|
|
type="text"
|
|
bind:value={editable.middlename}
|
|
name="middlename"
|
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
/>
|
|
</div> -->
|
|
<div class="text-sm w-full">
|
|
<label for="lastname" class="font-medium text-gray-700"
|
|
>{$_("last-name")}</label
|
|
>
|
|
<input
|
|
autocomplete="off"
|
|
placeholder={$_("last-name")}
|
|
type="text"
|
|
bind:value={editable.lastname}
|
|
name="lastname"
|
|
class="mt-1 focus:ring-indigo-500 focus:border-indigo-500 block w-full shadow-sm rounded-l-md sm:text-sm border-gray-300 border bg-gray-50 text-gray-500 rounded-md p-2"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
<button
|
|
type="submit"
|
|
disabled={!save_enabled}
|
|
class:opacity-50={!save_enabled}
|
|
on:click={submit}
|
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
|
>
|
|
{$_("save-changes")}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/await}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<div>
|
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
|
<div class="md:col-span-1">
|
|
<div class="px-4 sm:px-0">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
|
{$_("password")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
{$_("change-your-password-here")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{#await user_promise}
|
|
{$_("loading-profile-data")}
|
|
{:then}
|
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
|
<div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
|
|
<label for="new_password" class="font-medium text-gray-700"
|
|
>{$_("new-password")}</label
|
|
>
|
|
<div class="-mt-px relative">
|
|
<input
|
|
aria-label={$_("password")}
|
|
type="password"
|
|
required=""
|
|
bind:value={password_change}
|
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
|
placeholder={$_("password")}
|
|
/>
|
|
</div>
|
|
<label for="new_password" class="font-medium text-gray-700"
|
|
>{$_("confirm-the-new-password")}</label
|
|
>
|
|
<div class="-mt-px relative">
|
|
<input
|
|
aria-label={$_("password")}
|
|
type="password"
|
|
required=""
|
|
bind:value={password_confirm}
|
|
class="border-gray-300 placeholder-gray-500 appearance-none rounded-md relative block w-full px-3 py-2 border focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
|
|
placeholder={$_("password")}
|
|
/>
|
|
</div>
|
|
<PasswordStrength bind:password_change bind:password_confirm />
|
|
</div>
|
|
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
|
<button
|
|
type="submit"
|
|
disabled={!update_password_enabled}
|
|
class:opacity-50={!update_password_enabled}
|
|
on:click={changePassword}
|
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"
|
|
>
|
|
{$_("update-password")}
|
|
</button>
|
|
{#if update_password_enabled}
|
|
<p>
|
|
{$_(
|
|
"after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that"
|
|
)}
|
|
</p>
|
|
{/if}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/await}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto py-6 px-4 sm:px-6 lg:px-8">
|
|
<div>
|
|
<div class="md:grid md:grid-cols-3 md:gap-6">
|
|
<div class="md:col-span-1">
|
|
<div class="px-4 sm:px-0">
|
|
<h3 class="text-lg font-medium leading-6 text-gray-900">
|
|
{$_("danger-zone")}
|
|
</h3>
|
|
<p class="mt-1 text-sm text-gray-600">
|
|
{$_("stuff-that-could-harm-your-profile")}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
{#await user_promise}
|
|
{$_("loading-profile-data")}
|
|
{:then}
|
|
<div class="mt-5 md:mt-0 md:col-span-2">
|
|
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
|
<div class="px-4 py-3 bg-gray-50 text-left sm:px-6">
|
|
<span data-id="donor_actions_${editable.id}">
|
|
{#if delete_triggered}
|
|
<button
|
|
on:click={() => {
|
|
modal_open = true;
|
|
}}
|
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
|
>{$_("confirm-deletion")}</button
|
|
>
|
|
<button
|
|
on:click={() => {
|
|
delete_triggered = !delete_triggered;
|
|
}}
|
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-400 text-base font-medium text-white sm:w-auto sm:"
|
|
>{$_("cancel")}</button
|
|
>
|
|
{/if}
|
|
{#if !delete_triggered}
|
|
<button
|
|
on:click={() => {
|
|
delete_triggered = true;
|
|
}}
|
|
type="button"
|
|
class="w-full justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-red-600 text-base font-medium text-white hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 sm:ml-3 sm:w-auto sm:"
|
|
>{$_("delete-profile")}</button
|
|
>
|
|
{/if}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/await}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|