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

ui/src/components/settings/PageAuthProviders.svelte

@@ -12,12 +12,14 @@
     $pageTitle = "Auth providers";
 
     let emailAuthAccordion;
-    let authSettings = {};
+    let originalFormSettings = {};
+    let formSettings = {};
     let isLoading = false;
     let isSaving = false;
-    let initialHash = "";
 
-    $: hasChanges = initialHash != JSON.stringify(authSettings);
+    $: initialHash = JSON.stringify(originalFormSettings);
+
+    $: hasChanges = initialHash != JSON.stringify(formSettings);
 
     loadSettings();
 
@@ -42,7 +44,7 @@
         isSaving = true;
 
         try {
-            const result = await ApiClient.settings.update(CommonHelper.filterRedactedProps(authSettings));
+            const result = await ApiClient.settings.update(CommonHelper.filterRedactedProps(formSettings));
             initSettings(result);
             setErrors({});
             emailAuthAccordion?.collapseSiblings();
@@ -57,18 +59,23 @@
     function initSettings(data) {
         data = data || {};
 
-        authSettings = {};
-        authSettings.emailAuth = Object.assign({ enabled: true }, data.emailAuth);
+        formSettings = {
+            emailAuth: Object.assign({ enabled: true }, data.emailAuth),
+        };
 
         const providers = ["googleAuth", "facebookAuth", "githubAuth", "gitlabAuth"];
         for (const provider of providers) {
-            authSettings[provider] = Object.assign(
+            formSettings[provider] = Object.assign(
                 { enabled: false, allowRegistrations: true },
                 data[provider]
             );
         }
 
-        initialHash = JSON.stringify(authSettings);
+        originalFormSettings = JSON.parse(JSON.stringify(formSettings));
+    }
+
+    function reset() {
+        formSettings = JSON.parse(JSON.stringify(originalFormSettings || {}));
     }
 </script>
 
@@ -93,28 +100,28 @@
                     <EmailAuthAccordion
                         bind:this={emailAuthAccordion}
                         single
-                        bind:config={authSettings.emailAuth}
+                        bind:config={formSettings.emailAuth}
                     />
                     <AuthProviderAccordion
                         single
                         key="googleAuth"
                         title="Google"
                         icon="ri-google-line"
-                        bind:config={authSettings.googleAuth}
+                        bind:config={formSettings.googleAuth}
                     />
                     <AuthProviderAccordion
                         single
                         key="facebookAuth"
                         title="Facebook"
                         icon="ri-facebook-line"
-                        bind:config={authSettings.facebookAuth}
+                        bind:config={formSettings.facebookAuth}
                     />
                     <AuthProviderAccordion
                         single
                         key="githubAuth"
                         title="GitHub"
                         icon="ri-github-line"
-                        bind:config={authSettings.githubAuth}
+                        bind:config={formSettings.githubAuth}
                     />
                     <AuthProviderAccordion
                         single
@@ -122,12 +129,22 @@
                         title="GitLab"
                         icon="ri-gitlab-line"
                         showSelfHostedFields
-                        bind:config={authSettings.gitlabAuth}
+                        bind:config={formSettings.gitlabAuth}
                     />
                 </div>
 
                 <div class="flex m-t-base">
                     <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"