From 5d7eb690e4f2be0d389c785abe73c137cf25c29c Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Fri, 19 Mar 2021 19:03:29 +0100
Subject: [PATCH] Added inputs for password update

ref #103
---
 src/components/settings/Settings.svelte | 67 +++++++++++++++++++++++++
 1 file changed, 67 insertions(+)

diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 69a861d7..00013804 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -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">