[#275] added support to customize the default user email templates from the Admin UI

ui/src/components/settings/PageTokenOptions.svelte

@@ -18,12 +18,14 @@
 
     $pageTitle = "Token options";
 
-    let tokenSettings = {};
+    let originalFormSettings = {};
+    let formSettings = {};
     let isLoading = false;
     let isSaving = false;
-    let initialHash = "";
 
-    $: hasChanges = initialHash != JSON.stringify(tokenSettings);
+    $: initialHash = JSON.stringify(originalFormSettings);
+
+    $: hasChanges = initialHash != JSON.stringify(formSettings);
 
     loadSettings();
 
@@ -48,7 +50,7 @@
         isSaving = true;
 
         try {
-            const result = await ApiClient.settings.update(CommonHelper.filterRedactedProps(tokenSettings));
+            const result = await ApiClient.settings.update(CommonHelper.filterRedactedProps(formSettings));
             initSettings(result);
             addSuccessToast("Successfully saved tokens options.");
         } catch (err) {
@@ -60,15 +62,19 @@
 
     function initSettings(data) {
         data = data || {};
-        tokenSettings = {};
+        formSettings = {};
 
         for (const listItem of tokensList) {
-            tokenSettings[listItem.key] = {
+            formSettings[listItem.key] = {
                 duration: data[listItem.key]?.duration || 0,
             };
         }
 
-        initialHash = JSON.stringify(tokenSettings);
+        originalFormSettings = JSON.parse(JSON.stringify(formSettings));
+    }
+
+    function reset() {
+        formSettings = JSON.parse(JSON.stringify(originalFormSettings || {}));
     }
 </script>
 
@@ -98,19 +104,19 @@
                             type="number"
                             id={uniqueId}
                             required
-                            bind:value={tokenSettings[token.key].duration}
+                            bind:value={formSettings[token.key].duration}
                         />
                         <div class="help-block">
                             <span
                                 class="link-primary"
-                                class:txt-success={tokenSettings[token.key].secret}
+                                class:txt-success={formSettings[token.key].secret}
                                 on:click={() => {
                                     // toggle
-                                    if (tokenSettings[token.key].secret) {
-                                        delete tokenSettings[token.key].secret;
-                                        tokenSettings[token.key] = tokenSettings[token.key];
+                                    if (formSettings[token.key].secret) {
+                                        delete formSettings[token.key].secret;
+                                        formSettings[token.key] = formSettings[token.key];
                                     } else {
-                                        tokenSettings[token.key].secret = CommonHelper.randomString(50);
+                                        formSettings[token.key].secret = CommonHelper.randomString(50);
                                     }
                                 }}
                             >
@@ -122,6 +128,16 @@
 
                 <div class="flex">
                     <div class="flex-fill" />
+                    {#if hasChanges}
+                        <button
+                            type="button"
+                            class="btn btn-secondary btn-hint"
+                            disabled={isSaving}
+                            on:click={() => reset()}
+                        >
+                            <span class="txt">Cancel</span>
+                        </button>
+                    {/if}
                     <button
                         type="submit"
                         class="btn btn-expanded"