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>