fix: Enable Update button for any field change in all OAuth provider …

src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte

@@ -60,10 +60,11 @@
         label="Services ID"
         autofocus={true}
         placeholder="com.company.appname"
-        bind:value={appId} />
-    <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} />
-    <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} />
-    <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} />
+        bind:value={appId}
+        required />
+    <InputText id="keyID" label="Key ID" placeholder="SHAB13ROFN" bind:value={keyID} required />
+    <InputText id="teamID" label="Team ID" placeholder="ELA2CD3AED" bind:value={teamID} required />
+    <InputTextarea id="p8" label="P8 File" placeholder="" bind:value={p8} required />
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
     </Alert.Inline>
@@ -73,10 +74,13 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && keyID && teamID && p8)}
+            disabled={!appId ||
+                !keyID ||
+                !teamID ||
+                !p8 ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte

@@ -56,18 +56,21 @@
         label="Client ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="Client Secret"
         placeholder="Enter Client Secret"
         minlength={0}
-        bind:value={clientSecret} />
+        bind:value={clientSecret}
+        required />
     <InputText
         id="domain"
         label="Auth0 Domain"
-        placeholder="Your Auth0 domain"
-        bind:value={auth0Domain} />
+        placeholder="your-tenant.auth0.com"
+        bind:value={auth0Domain}
+        required />
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
     </Alert.Inline>
@@ -77,10 +80,12 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && clientSecret && auth0Domain)}
+            disabled={!appId ||
+                !clientSecret ||
+                !auth0Domain ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte

@@ -60,18 +60,21 @@
         label="Client ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="Client Secret"
         placeholder="Enter Client Secret"
         minlength={0}
-        bind:value={clientSecret} />
+        bind:value={clientSecret}
+        required />
     <InputText
         id="domain"
         label="Authentik Base-Domain"
         placeholder="Your Authentik domain"
-        bind:value={authentikDomain} />
+        bind:value={authentikDomain}
+        required />
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
     </Alert.Inline>
@@ -81,10 +84,12 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && clientSecret && authentikDomain)}
+            disabled={!appId ||
+                !clientSecret ||
+                !authentikDomain ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte

@@ -55,18 +55,16 @@
         label="App ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="App Secret"
         placeholder="Enter App Secret"
         minlength={0}
-        bind:value={clientSecret} />
-    <InputText
-        id="endpoint"
-        label="Endpoint (optional)"
-        placeholder="Your endpoint"
-        bind:value={endpoint} />
+        bind:value={clientSecret}
+        required />
+    <InputText id="endpoint" label="Endpoint" placeholder="Your endpoint" bind:value={endpoint} />
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
     </Alert.Inline>
@@ -76,10 +74,11 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && clientSecret)}
+            disabled={!appId ||
+                !clientSecret ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte

@@ -54,13 +54,15 @@
         label="App ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="App Secret"
         placeholder="Enter App Secret"
         minlength={0}
-        bind:value={secret} />
+        bind:value={secret}
+        required />
     <Alert.Inline status="info">
         To complete the setup, create an OAuth2 client ID with "Web application" as the application
         type, then add this redirect URI to your {provider.name} configuration.
@@ -74,9 +76,9 @@
         <Button
             disabled={!appId ||
                 !secret ||
-                (appId === provider.appId &&
-                    secret === provider.secret &&
-                    enabled === provider.enabled)}
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte

@@ -55,13 +55,15 @@
         label="App ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="App Secret"
         placeholder="Enter App Secret"
         minlength={0}
-        bind:value={secret} />
+        bind:value={secret}
+        required />
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
     </Alert.Inline>
@@ -73,9 +75,9 @@
         <Button
             disabled={!appId ||
                 !secret ||
-                (appId === provider.appId &&
-                    secret === provider.secret &&
-                    enabled === provider.enabled)}
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte

@@ -42,9 +42,8 @@
         clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} bind:show on:close>
-    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
-    <p>
+<Modal {error} onSubmit={update} bind:show on:close title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
         To use {provider.name} authentication in your application, first fill in this form. For more
         info you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer">
@@ -57,13 +56,15 @@
         label="Application (client) ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="Client Secret"
         placeholder="Enter Client Secret"
         minlength={0}
-        bind:value={clientSecret} />
+        bind:value={clientSecret}
+        required />
     <InputText
         id="tenant"
         label="Target Tenant"
@@ -78,10 +79,11 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && clientSecret && tenantID)}
+            disabled={!appId ||
+                !clientSecret ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte

@@ -78,33 +78,39 @@
         label="Client ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="Client Secret"
         placeholder="Enter Client Secret"
         minlength={0}
-        bind:value={clientSecret} />
+        bind:value={clientSecret}
+        required />
     <InputText
         id="well-known-endpoint"
         label="Well-Known Endpoint"
         placeholder="https://example.com/.well-known/openid-configuration"
-        bind:value={wellKnownEndpoint} />
+        bind:value={wellKnownEndpoint}
+        required={!authorizationEndpoint && !tokenEndpoint && !userinfoEndpoint} />
     <InputText
         id="authorization-endpoint"
         label="Authorization Endpoint"
         placeholder="https://example.com/authorize"
-        bind:value={authorizationEndpoint} />
+        bind:value={authorizationEndpoint}
+        required={!wellKnownEndpoint} />
     <InputText
         id="token-endpoint"
         label="Token Endpoint"
         placeholder="https://example.com/token"
-        bind:value={tokenEndpoint} />
+        bind:value={tokenEndpoint}
+        required={!wellKnownEndpoint} />
     <InputText
         id="userinfo-endpoint"
         label="User Info Endpoint"
         placeholder="https://example.com/userinfo"
-        bind:value={userinfoEndpoint} />
+        bind:value={userinfoEndpoint}
+        required={!wellKnownEndpoint} />
 
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
@@ -115,10 +121,13 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && isValidSecret)}
+            disabled={!appId ||
+                !clientSecret ||
+                (!wellKnownEndpoint &&
+                    (!authorizationEndpoint || !tokenEndpoint || !userinfoEndpoint)) ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>

src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte

@@ -47,9 +47,14 @@
             : provider.secret;
 </script>
 
-<Modal {error} onSubmit={update} size="l" bind:show on:close>
-    <svelte:fragment slot="title">{provider.name} OAuth2 settings</svelte:fragment>
-    <p>
+<Modal
+    {error}
+    onSubmit={update}
+    size="m"
+    bind:show
+    on:close
+    title={`${provider.name} OAuth2 settings`}>
+    <p slot="description">
         To use {provider.name} authentication in your application, first fill in this form. For more
         info you can
         <a class="link" href={oAuthProvider?.docs} target="_blank" rel="noopener noreferrer"
@@ -61,23 +66,27 @@
         label="Client ID"
         autofocus={true}
         placeholder="Enter ID"
-        bind:value={appId} />
+        bind:value={appId}
+        required />
     <InputPassword
         id="secret"
         label="Client Secret"
         placeholder="Enter Client Secret"
         minlength={0}
-        bind:value={clientSecret} />
+        bind:value={clientSecret}
+        required />
     <InputText
         id="domain"
         label="Okta Domain"
         placeholder="dev-1337.okta.com"
-        bind:value={oktaDomain} />
+        bind:value={oktaDomain}
+        required />
     <InputText
         id="serverID"
         label="Authorization Server ID"
         placeholder="default"
-        bind:value={authorizationServerId} />
+        bind:value={authorizationServerId}
+        required />
 
     <Alert.Inline status="info">
         To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration.
@@ -88,10 +97,13 @@
     <svelte:fragment slot="footer">
         <Button secondary on:click={() => (provider = null)}>Cancel</Button>
         <Button
-            disabled={(secret === provider.secret &&
-                enabled === provider.enabled &&
-                appId === provider.appId) ||
-                !(appId && clientSecret && oktaDomain && authorizationServerId)}
+            disabled={!appId ||
+                !clientSecret ||
+                !oktaDomain ||
+                !authorizationServerId ||
+                (secret === provider.secret &&
+                    enabled === provider.enabled &&
+                    appId === provider.appId)}
             submit>Update</Button>
     </svelte:fragment>
 </Modal>