From 37bc5ff17b8f97dfc76962435f9cb64156848c82 Mon Sep 17 00:00:00 2001
From: Nicolai Ort <info@nicolai-ort.com>
Date: Fri, 19 Mar 2021 17:31:45 +0100
Subject: [PATCH] Implemented change detection

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

diff --git a/src/components/settings/Settings.svelte b/src/components/settings/Settings.svelte
index 75397572..24d7499b 100644
--- a/src/components/settings/Settings.svelte
+++ b/src/components/settings/Settings.svelte
@@ -1,8 +1,13 @@
 <script>
   import { _ } from "svelte-i18n";
+  import isEmail from "validator/es/lib/isEmail";
   import { MeService } from "@odit/lfk-client-js";
   $: original_data = {};
   $: editable = {};
+  $: changes_performed = !(
+    JSON.stringify(editable) === JSON.stringify(original_data)
+  );
+  $: save_enabled = changes_performed && isEmail(editable.email);
   const user_promise = MeService.meControllerGetPermissions().then((data) => {
     original_data = Object.assign(original_data, data);
     editable = Object.assign(editable, original_data);
@@ -32,39 +37,109 @@
             </p>
           </div>
         </div>
-        <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>
-                <!-- svelte-ignore a11y-label-has-associated-control -->
-                <label class="block text-sm font-medium text-gray-700">
-                  {$_('profile-picture')}
-                </label>
-                <div class="mt-2 flex items-center">
-                  <span
-                    class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100">
-                    <img
-                      alt={$_('profile-picture')}
-                      class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
-                      src={editable.profilePic} />
-                  </span>
-                  <button
+        {#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>
+                  <!-- svelte-ignore a11y-label-has-associated-control -->
+                  <label class="block text-sm font-medium text-gray-700">
+                    {$_('profile-picture')}
+                  </label>
+                  <div class="mt-2 flex items-center">
+                    <span
+                      class="inline-block h-20 w-20 rounded-full overflow-hidden bg-gray-100">
+                      <img
+                        alt={$_('profile-picture')}
+                        class="h-20 w-20 rounded-full overflow-hidden bg-gray-100"
+                        src={editable.profilePic} />
+                    </span>
+                    <!-- <button
                     type="button"
                     class="ml-5 bg-white py-2 px-3 border border-gray-300 rounded-md shadow-sm text-sm leading-4 font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                     Change
-                  </button>
+                  </button> -->
+                  </div>
+                </div>
+                <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 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>
+                  <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 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>
+                {/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 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>
+                  <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 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>
+                  <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 dark:bg-gray-900 dark:text-gray-100 rounded-md p-2" />
                 </div>
               </div>
-            </div>
-            <div class="px-4 py-3 bg-gray-50 text-right sm:px-6">
-              <button
-                type="submit"
-                class="inline-flex justify-center py-2 px-4 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
-                Save
-              </button>
+              <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}
+                  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>
-        </div>
+        {/await}
       </div>
     </div>
   </div>