added predefined mime types list and other minor ui improvements

ui/src/components/settings/AuthProviderAccordion.svelte

@@ -43,12 +43,6 @@
             <span class="txt">{title}</span>
         </div>
 
-        {#if config.enabled}
-            <span class="label label-success">Enabled</span>
-        {:else}
-            <span class="label label-hint">Disabled</span>
-        {/if}
-
         <div class="flex-fill" />
 
         {#if hasErrors}
@@ -58,6 +52,12 @@
                 use:tooltip={{ text: "Has errors", position: "left" }}
             />
         {/if}
+
+        {#if config.enabled}
+            <span class="label label-success">Enabled</span>
+        {:else}
+            <span class="label label-hint">Disabled</span>
+        {/if}
     </svelte:fragment>
 
     <Field class="form-field form-field-toggle m-b-0" name="{key}.enabled" let:uniqueId>
@@ -65,28 +65,26 @@
         <label for={uniqueId}>Enable</label>
     </Field>
 
-    {#if config.enabled}
-        <div class="grid" transition:slide|local={{ duration: 200 }}>
-            <div class="col-12 spacing" />
-            <div class="col-lg-6">
-                <Field class="form-field required" name="{key}.clientId" let:uniqueId>
-                    <label for={uniqueId}>Client ID</label>
-                    <input type="text" id={uniqueId} bind:value={config.clientId} required />
-                </Field>
-            </div>
-
-            <div class="col-lg-6">
-                <Field class="form-field required" name="{key}.clientSecret" let:uniqueId>
-                    <label for={uniqueId}>Client Secret</label>
-                    <RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required />
-                </Field>
-            </div>
-
-            {#if optionsComponent}
-                <div class="col-lg-12">
-                    <svelte:component this={optionsComponent} {key} bind:config />
-                </div>
-            {/if}
+    <div class="grid">
+        <div class="col-12 spacing" />
+        <div class="col-lg-6">
+            <Field class="form-field required" name="{key}.clientId" let:uniqueId>
+                <label for={uniqueId}>Client ID</label>
+                <input type="text" id={uniqueId} bind:value={config.clientId} required />
+            </Field>
         </div>
-    {/if}
+
+        <div class="col-lg-6">
+            <Field class="form-field required" name="{key}.clientSecret" let:uniqueId>
+                <label for={uniqueId}>Client Secret</label>
+                <RedactedPasswordInput bind:value={config.clientSecret} id={uniqueId} required />
+            </Field>
+        </div>
+
+        {#if optionsComponent}
+            <div class="col-lg-12">
+                <svelte:component this={optionsComponent} {key} bind:config />
+            </div>
+        {/if}
+    </div>
 </Accordion>

ui/src/components/settings/PageAuthProviders.svelte

@@ -86,7 +86,7 @@
 
     <div class="wrapper">
         <form class="panel" autocomplete="off" on:submit|preventDefault={save}>
-            <h6 class="m-b-base">Manage the allowed users sign-in/sign-up methods.</h6>
+            <h6 class="m-b-base">Manage the allowed users OAuth2 sign-in/sign-up methods.</h6>
 
             {#if isLoading}
                 <div class="loader" />
@@ -122,7 +122,6 @@
                         class="btn btn-expanded"
                         class:btn-loading={isSaving}
                         disabled={!hasChanges || isSaving}
-                        on:click={() => save()}
                     >
                         <span class="txt">Save changes</span>
                     </button>

ui/src/components/settings/providers/MicrosoftOptions.svelte

@@ -10,13 +10,7 @@
     <div class="col-lg-12">
         <Field class="form-field required" name="{key}.authUrl" let:uniqueId>
             <label for={uniqueId}>Auth URL</label>
-            <input
-                type="url"
-                id={uniqueId}
-                required
-                placeholder="https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize"
-                bind:value={config.authUrl}
-            />
+            <input type="url" id={uniqueId} required bind:value={config.authUrl} />
             <div class="help-block">
                 Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/authorize`}
             </div>
@@ -25,13 +19,7 @@
     <div class="col-lg-12">
         <Field class="form-field required" name="{key}.tokenUrl" let:uniqueId>
             <label for={uniqueId}>Token URL</label>
-            <input
-                type="text"
-                id={uniqueId}
-                required
-                placeholder="https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token"
-                bind:value={config.tokenUrl}
-            />
+            <input type="text" id={uniqueId} required bind:value={config.tokenUrl} />
             <div class="help-block">
                 Eg. {`https://login.microsoftonline.com/YOUR_DIRECTORY_TENANT_ID/oauth2/v2.0/token`}
             </div>