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

Added inputs for password update

Browse Source 
ref #103
This commit is contained in:
Nicolai Ort 2021-03-19 19:03:29 +01:00
parent bef180f4ba
commit 5d7eb690e4
1 changed files with 67 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,10 +9,13 @@
$: 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_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);
@ -172,6 +175,70 @@
</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-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>
<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-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}
<span
class="flex items-center font-medium tracking-wide text-red-500 text-xs mt-1 ml-1">Passwords don't match</span>
{/if}
</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={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">
Update password
</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">