formatting, full migration to svelte-french-toast
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
import { _ } from "svelte-i18n";
|
||||
import isEmail from "validator/es/lib/isEmail";
|
||||
import { MeService } from "@odit/lfk-client-js";
|
||||
import Toastify from "toastify-js";
|
||||
|
||||
import ConfirmProfileDeletion from "./ConfirmProfileDeletion.svelte";
|
||||
import PasswordStrength, {
|
||||
password_strong_enough_and_equal,
|
||||
@@ -31,28 +31,18 @@
|
||||
});
|
||||
function submit() {
|
||||
if (data_loaded === true && save_enabled) {
|
||||
Toastify({
|
||||
text: $_("updating-your-profile"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("updating-your-profile"));
|
||||
MeService.meControllerPut(editable)
|
||||
.then((resp) => {
|
||||
original_data = Object.assign(original_data, editable);
|
||||
Toastify({
|
||||
text: $_("profile-updated"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("profile-updated"));
|
||||
})
|
||||
.catch((err) => {});
|
||||
}
|
||||
}
|
||||
function changePassword() {
|
||||
if (data_loaded === true && update_password_enabled) {
|
||||
Toastify({
|
||||
text: $_("changing-your-password"),
|
||||
duration: 2500,
|
||||
}).showToast();
|
||||
toast($_("changing-your-password"));
|
||||
let postdata = Object.assign({}, original_data);
|
||||
postdata.password = password_confirm;
|
||||
MeService.meControllerPut(postdata)
|
||||
@@ -60,11 +50,7 @@
|
||||
password_confirm = "";
|
||||
password_change = "";
|
||||
postdata = {};
|
||||
Toastify({
|
||||
text: $_("password-changed"),
|
||||
duration: 2500,
|
||||
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
|
||||
}).showToast();
|
||||
toast.success($_("password-changed"));
|
||||
setTimeout(() => {
|
||||
location.replace("./");
|
||||
}, 500);
|
||||
@@ -78,8 +64,9 @@
|
||||
<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')}
|
||||
class="mt-9 font-display text-4xl leading-none font-semibold text-white sm:text-5xl lg:text-6xl"
|
||||
>
|
||||
🔨<br />{$_("settings")}
|
||||
</h1>
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,82 +77,89 @@
|
||||
<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')}
|
||||
{$_("profile")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('everything-concerning-your-profile')}
|
||||
{$_("everything-concerning-your-profile")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("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>
|
||||
<label for="username" class="font-medium text-gray-700"
|
||||
>{$_("username")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('username')}
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="email"
|
||||
class="font-medium text-gray-700">{$_('e-mail-adress')}</label>
|
||||
<label for="email" class="font-medium text-gray-700"
|
||||
>{$_("e-mail-adress")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('e-mail-adress')}
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||
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 dark:bg-gray-900 dark:text-gray-100 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>
|
||||
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>
|
||||
<label for="firstname" class="font-medium text-gray-700"
|
||||
>{$_("first-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('first-name')}
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="middlename"
|
||||
class="font-medium text-gray-700">{$_('middle-name')}</label>
|
||||
<label for="middlename" class="font-medium text-gray-700"
|
||||
>{$_("middle-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('middle-name')}
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
<div class="text-sm w-full">
|
||||
<label
|
||||
for="lastname"
|
||||
class="font-medium text-gray-700">{$_('last-name')}</label>
|
||||
<label for="lastname" class="font-medium text-gray-700"
|
||||
>{$_("last-name")}</label
|
||||
>
|
||||
<input
|
||||
autocomplete="off"
|
||||
placeholder={$_('last-name')}
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
|
||||
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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
|
||||
@@ -174,8 +168,9 @@
|
||||
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')}
|
||||
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>
|
||||
@@ -190,42 +185,44 @@
|
||||
<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')}
|
||||
{$_("password")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('change-your-password-here')}
|
||||
{$_("change-your-password-here")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("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>
|
||||
<label for="new_password" class="font-medium text-gray-700"
|
||||
>{$_("new-password")}</label
|
||||
>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label={$_('password')}
|
||||
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')} />
|
||||
placeholder={$_("password")}
|
||||
/>
|
||||
</div>
|
||||
<label
|
||||
for="new_password"
|
||||
class="font-medium text-gray-700">{$_('confirm-the-new-password')}</label>
|
||||
<label for="new_password" class="font-medium text-gray-700"
|
||||
>{$_("confirm-the-new-password")}</label
|
||||
>
|
||||
<div class="-mt-px relative">
|
||||
<input
|
||||
aria-label={$_('password')}
|
||||
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')} />
|
||||
placeholder={$_("password")}
|
||||
/>
|
||||
</div>
|
||||
<PasswordStrength bind:password_change bind:password_confirm />
|
||||
</div>
|
||||
@@ -235,12 +232,15 @@
|
||||
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')}
|
||||
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')}
|
||||
{$_(
|
||||
"after-the-update-youll-get-logged-out-please-login-with-your-new-password-after-that"
|
||||
)}
|
||||
</p>
|
||||
{/if}
|
||||
</div>
|
||||
@@ -256,15 +256,15 @@
|
||||
<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')}
|
||||
{$_("danger-zone")}
|
||||
</h3>
|
||||
<p class="mt-1 text-sm text-gray-600">
|
||||
{$_('stuff-that-could-harm-your-profile')}
|
||||
{$_("stuff-that-could-harm-your-profile")}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{#await user_promise}
|
||||
{$_('loading-profile-data')}
|
||||
{$_("loading-profile-data")}
|
||||
{:then}
|
||||
<div class="mt-5 md:mt-0 md:col-span-2">
|
||||
<div class="shadow sm:rounded-md sm:overflow-hidden">
|
||||
@@ -275,12 +275,16 @@
|
||||
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>
|
||||
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>
|
||||
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
|
||||
@@ -288,7 +292,9 @@
|
||||
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>
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user