lfk/frontend
2
0
Fork 0
Code Issues 3 Pull Requests Actions Projects Releases Wiki Activity

Implemented the password change logic

Browse Source 
ref #103
This commit is contained in:
Nicolai Ort 2021-03-19 19:14:12 +01:00
parent 3945f3cf38
commit 24b98983cf
1 changed files with 50 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
src/components/settings/Settings.svelte
View File

@ -15,7 +15,8 @@
JSON.stringify(editable) === JSON.stringify(original_data)
);
$: save_enabled = changes_performed && isEmail(editable.email);
$: update_password_enabled = password_change.length > 0 &&(password_change === password_confirm);
$: update_password_enabled =
password_change.length > 0 && password_change === password_confirm;
const user_promise = MeService.meControllerGet().then((data) => {
data_loaded = true;
data.groups = data.groups.map((g) => g.id);
@ -29,10 +30,8 @@
text: $_("updating-your-profile"),
duration: 2500,
}).showToast();
console.log(editable);
MeService.meControllerPut(editable)
.then((resp) => {
console.log(resp);
original_data = Object.assign(original_data, editable);
Toastify({
text: $_("profile-updated"),
@ -43,9 +42,30 @@
.catch((err) => {});
}
}
function changePassword() {
if (data_loaded === true && update_password_enabled) {
Toastify({
text: "Changing your password",
duration: 2500,
}).showToast();
let postdata = Object.assign({}, original_data);
postdata.password = password_confirm;
MeService.meControllerPut(postdata)
.then((resp) => {
password_confirm = "";
password_change = "";
Toastify({
text: "Password changed",
duration: 2500,
backgroundColor: "linear-gradient(to right, #00b09b, #96c93d)",
}).showToast();
})
.catch((err) => {});
}
}
</script>
<ConfirmProfileDeletion bind:modal_open bind:delete_triggered/>
<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
@ -195,8 +215,8 @@
<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>
for="new_password"
class="font-medium text-gray-700">{$_('new-password')}</label>
<div class="-mt-px relative">
<input
aria-label={$_('password')}
@ -207,8 +227,8 @@
placeholder={$_('password')} />
</div>
<label
for="new_password"
class="font-medium text-gray-700">{$_('confirm-the-new-password')}</label>
for="new_password"
class="font-medium text-gray-700">{$_('confirm-the-new-password')}</label>
<div class="-mt-px relative">
<input
aria-label={$_('password')}
@ -218,7 +238,7 @@
class="border-gray-300 placeholder-gray-500 appearance-none rounded-none relative block w-full px-3 py-2 border rounded-b-md focus:outline-none focus:shadow-outline-blue focus:border-blue-300 focus:z-10 sm:text-sm"
placeholder={$_('password')} />
</div>
{#if (password_change != password_confirm) && password_change.length>0}
{#if password_change != password_confirm && password_change.length > 0}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">{$_('passwords-dont-match')}</span>
{/if}
@ -228,7 +248,7 @@
type="submit"
disabled={!update_password_enabled}
class:opacity-50={!update_password_enabled}
on:click={submit}
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>
@ -259,26 +279,26 @@
<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}
{#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>