diff --git a/e2e/steps/pro-project.ts b/e2e/steps/pro-project.ts index 0762132c4..438caebef 100644 --- a/e2e/steps/pro-project.ts +++ b/e2e/steps/pro-project.ts @@ -20,6 +20,9 @@ export async function enterCreditCard(page: Page) { await stripe.locator('id=Field-cvcInput').fill('123'); await stripe.locator('id=Field-countryInput').selectOption('DE'); await dialog.getByRole('button', { name: 'Add', exact: true }).click(); + await page.locator('id=state-picker').click(); // open dropdown + await page.getByRole('option', { name: 'Alabama' }).click(); + await dialog.getByRole('button', { name: 'Add', exact: true }).click(); await dialog.waitFor({ state: 'hidden' }); diff --git a/src/app.html b/src/app.html index 18a92b1fa..7ca4eefe8 100644 --- a/src/app.html +++ b/src/app.html @@ -5,9 +5,9 @@ - - - + + + %sveltekit.head% @@ -40,13 +40,13 @@
Appwrite Logo {#if group === '$new'} - + {#if showState} + + {:else} + -
-
-
+
+
+
+
+
-
-
- {#if showSetAsDefault} - + {#if showSetAsDefault} + + {/if} {/if} {/if} diff --git a/src/lib/components/billing/paymentModal.svelte b/src/lib/components/billing/paymentModal.svelte index c79602517..72accfd10 100644 --- a/src/lib/components/billing/paymentModal.svelte +++ b/src/lib/components/billing/paymentModal.svelte @@ -2,12 +2,14 @@ import { FakeModal } from '$lib/components'; import { InputText, Button } from '$lib/elements/forms'; import { createEventDispatcher, onMount } from 'svelte'; - import { initializeStripe, submitStripeCard } from '$lib/stores/stripe'; + import { initializeStripe, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe'; import { invalidate } from '$app/navigation'; import { Dependencies } from '$lib/constants'; import { addNotification } from '$lib/stores/notifications'; import { page } from '$app/state'; import { Spinner } from '@appwrite.io/pink-svelte'; + import type { PaymentMethod } from '@stripe/stripe-js'; + import StatePicker from './statePicker.svelte'; export let show = false; @@ -16,10 +18,36 @@ let name: string; let error: string; let modal: FakeModal; + let showState: boolean = false; + let state: string = ''; + let paymentMethod: PaymentMethod | null = null; async function handleSubmit() { try { + if (showState && !state) { + throw Error('Please select a state'); + } + + if (showState) { + const card = await setPaymentMethod(paymentMethod.id, name, state); + modal.closeModal(); + await invalidate(Dependencies.PAYMENT_METHODS); + dispatch('submit', card); + addNotification({ + type: 'success', + message: 'A new payment method has been added to your account' + }); + return; + } + const card = await submitStripeCard(name, page?.params?.organization ?? null); + if (card && Object.hasOwn(card, 'id')) { + if ((card as PaymentMethod).card.country === 'US') { + paymentMethod = card as PaymentMethod; + showState = true; + return; + } + } modal.closeModal(); await invalidate(Dependencies.PAYMENT_METHODS); dispatch('submit', card); @@ -73,28 +101,30 @@ bind:error onSubmit={handleSubmit}> - - -
- {#if isLoading} -
- + {#if showState} + + {:else} + +
+ {#if isLoading} +
+ +
+ {/if} +
+
- {/if} - -
-
-
+ {/if} diff --git a/src/lib/components/billing/state.ts b/src/lib/components/billing/state.ts new file mode 100644 index 000000000..d3f08a113 --- /dev/null +++ b/src/lib/components/billing/state.ts @@ -0,0 +1,238 @@ +export const states: Array<{ name: string; abbreviation: string }> = [ + { + name: 'Alabama', + abbreviation: 'AL' + }, + { + name: 'Alaska', + abbreviation: 'AK' + }, + { + name: 'American Samoa', + abbreviation: 'AS' + }, + { + name: 'Arizona', + abbreviation: 'AZ' + }, + { + name: 'Arkansas', + abbreviation: 'AR' + }, + { + name: 'California', + abbreviation: 'CA' + }, + { + name: 'Colorado', + abbreviation: 'CO' + }, + { + name: 'Connecticut', + abbreviation: 'CT' + }, + { + name: 'Delaware', + abbreviation: 'DE' + }, + { + name: 'District Of Columbia', + abbreviation: 'DC' + }, + { + name: 'Federated States Of Micronesia', + abbreviation: 'FM' + }, + { + name: 'Florida', + abbreviation: 'FL' + }, + { + name: 'Georgia', + abbreviation: 'GA' + }, + { + name: 'Guam', + abbreviation: 'GU' + }, + { + name: 'Hawaii', + abbreviation: 'HI' + }, + { + name: 'Idaho', + abbreviation: 'ID' + }, + { + name: 'Illinois', + abbreviation: 'IL' + }, + { + name: 'Indiana', + abbreviation: 'IN' + }, + { + name: 'Iowa', + abbreviation: 'IA' + }, + { + name: 'Kansas', + abbreviation: 'KS' + }, + { + name: 'Kentucky', + abbreviation: 'KY' + }, + { + name: 'Louisiana', + abbreviation: 'LA' + }, + { + name: 'Maine', + abbreviation: 'ME' + }, + { + name: 'Marshall Islands', + abbreviation: 'MH' + }, + { + name: 'Maryland', + abbreviation: 'MD' + }, + { + name: 'Massachusetts', + abbreviation: 'MA' + }, + { + name: 'Michigan', + abbreviation: 'MI' + }, + { + name: 'Minnesota', + abbreviation: 'MN' + }, + { + name: 'Mississippi', + abbreviation: 'MS' + }, + { + name: 'Missouri', + abbreviation: 'MO' + }, + { + name: 'Montana', + abbreviation: 'MT' + }, + { + name: 'Nebraska', + abbreviation: 'NE' + }, + { + name: 'Nevada', + abbreviation: 'NV' + }, + { + name: 'New Hampshire', + abbreviation: 'NH' + }, + { + name: 'New Jersey', + abbreviation: 'NJ' + }, + { + name: 'New Mexico', + abbreviation: 'NM' + }, + { + name: 'New York', + abbreviation: 'NY' + }, + { + name: 'North Carolina', + abbreviation: 'NC' + }, + { + name: 'North Dakota', + abbreviation: 'ND' + }, + { + name: 'Northern Mariana Islands', + abbreviation: 'MP' + }, + { + name: 'Ohio', + abbreviation: 'OH' + }, + { + name: 'Oklahoma', + abbreviation: 'OK' + }, + { + name: 'Oregon', + abbreviation: 'OR' + }, + { + name: 'Palau', + abbreviation: 'PW' + }, + { + name: 'Pennsylvania', + abbreviation: 'PA' + }, + { + name: 'Puerto Rico', + abbreviation: 'PR' + }, + { + name: 'Rhode Island', + abbreviation: 'RI' + }, + { + name: 'South Carolina', + abbreviation: 'SC' + }, + { + name: 'South Dakota', + abbreviation: 'SD' + }, + { + name: 'Tennessee', + abbreviation: 'TN' + }, + { + name: 'Texas', + abbreviation: 'TX' + }, + { + name: 'Utah', + abbreviation: 'UT' + }, + { + name: 'Vermont', + abbreviation: 'VT' + }, + { + name: 'Virgin Islands', + abbreviation: 'VI' + }, + { + name: 'Virginia', + abbreviation: 'VA' + }, + { + name: 'Washington', + abbreviation: 'WA' + }, + { + name: 'West Virginia', + abbreviation: 'WV' + }, + { + name: 'Wisconsin', + abbreviation: 'WI' + }, + { + name: 'Wyoming', + abbreviation: 'WY' + } +]; diff --git a/src/lib/components/billing/statePicker.svelte b/src/lib/components/billing/statePicker.svelte new file mode 100644 index 000000000..839b31dd9 --- /dev/null +++ b/src/lib/components/billing/statePicker.svelte @@ -0,0 +1,44 @@ + + + + {#if card} + + + + ending in {card.card?.last4} + + + {card.card.country} + {card.billing_details.address.postal_code} + + + {/if} + + + + To complete the billing information, select your state so we can apply the correct taxes + and meet U.S. legal requirements. + + + + ({ + label: state.name, + value: state.abbreviation, + id: state.abbreviation.toLowerCase() + }))} /> + diff --git a/src/lib/components/csvImportBox.svelte b/src/lib/components/csvImportBox.svelte index 60f93abf6..7b3fcc920 100644 --- a/src/lib/components/csvImportBox.svelte +++ b/src/lib/components/csvImportBox.svelte @@ -154,7 +154,7 @@ migrations.migrations.forEach(updateOrAddItem); }); - return sdk.forConsole.client.subscribe('console', (response) => { + return sdk.forConsoleIn(page.params.region).client.subscribe('console', (response) => { if (!response.channels.includes(`projects.${getProjectId()}`)) return; if (response.events.includes('migrations.*')) { updateOrAddItem(response.payload as Payload); diff --git a/src/lib/sdk/billing.ts b/src/lib/sdk/billing.ts index b1d3b5809..3dbd0b9f9 100644 --- a/src/lib/sdk/billing.ts +++ b/src/lib/sdk/billing.ts @@ -1111,7 +1111,8 @@ export class Billing { async setPaymentMethod( paymentMethodId: string, providerMethodId: string | PaymentMethod, - name: string + name: string, + state: string | undefined = undefined ): Promise { const path = `/account/payment-methods/${paymentMethodId}/provider`; const params = { @@ -1119,6 +1120,10 @@ export class Billing { providerMethodId, name }; + + if (state !== undefined) { + params['state'] = state; + } const uri = new URL(this.client.config.endpoint + path); return await this.client.call( 'patch', diff --git a/src/lib/stores/stripe.ts b/src/lib/stores/stripe.ts index 0f71da642..7e5fc31d6 100644 --- a/src/lib/stores/stripe.ts +++ b/src/lib/stores/stripe.ts @@ -1,4 +1,10 @@ -import type { Appearance, Stripe, StripeElement, StripeElements } from '@stripe/stripe-js'; +import type { + Appearance, + PaymentMethod, + Stripe, + StripeElement, + StripeElements +} from '@stripe/stripe-js'; import { sdk } from './sdk'; import { app } from './app'; import { get, writable } from 'svelte/store'; @@ -83,7 +89,8 @@ export async function submitStripeCard(name: string, organizationId?: string) { billing_details: { name } - } + }, + expand: ['payment_method'] }, redirect: 'if_required' }); @@ -95,9 +102,13 @@ export async function submitStripeCard(name: string, organizationId?: string) { } if (setupIntent && setupIntent.status === 'succeeded') { + if ((setupIntent.payment_method as PaymentMethod).card.country === 'US') { + // need to get state + return setupIntent.payment_method as PaymentMethod; + } const method = await sdk.forConsole.billing.setPaymentMethod( paymentMethod.$id, - setupIntent.payment_method, + (setupIntent.payment_method as PaymentMethod).id, name ); paymentElement.destroy(); @@ -115,6 +126,32 @@ export async function submitStripeCard(name: string, organizationId?: string) { } } +export async function setPaymentMethod(providerMethodId: string, name: string, state: string) { + if (!paymentMethod) { + addNotification({ + title: 'Error', + message: 'No payment method found. Please try again.', + type: 'error' + }); + return; + } + try { + const method = await sdk.forConsole.billing.setPaymentMethod( + paymentMethod.$id, + providerMethodId, + name, + state + ); + paymentElement.destroy(); + isStripeInitialized.set(false); + trackEvent(Submit.PaymentMethodCreate); + return method; + } catch (e) { + trackError(e, Submit.PaymentMethodCreate); + throw e; + } +} + export async function confirmPayment( orgId: string, clientSecret: string, diff --git a/src/routes/(console)/organization-[organization]/+page.svelte b/src/routes/(console)/organization-[organization]/+page.svelte index b8a78484c..a622d9523 100644 --- a/src/routes/(console)/organization-[organization]/+page.svelte +++ b/src/routes/(console)/organization-[organization]/+page.svelte @@ -16,12 +16,12 @@ PaginationWithLimit } from '$lib/components'; import { goto } from '$app/navigation'; - import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; + import { Submit, trackError, trackEvent, Click } from '$lib/actions/analytics'; import { sdk } from '$lib/stores/sdk'; import { loading } from '$routes/store'; import { ID, Region, type Models } from '@appwrite.io/console'; import { openImportWizard } from '../project-[region]-[project]/settings/migrations/(import)'; - import { billingProjectsLimitDate, readOnly } from '$lib/stores/billing'; + import { billingProjectsLimitDate, readOnly, upgradeURL } from '$lib/stores/billing'; import { onMount, type ComponentType } from 'svelte'; import { canWriteProjects } from '$lib/stores/roles'; import { checkPricingRefAndRedirect } from '$lib/helpers/pricingRedirect'; @@ -184,6 +184,17 @@ + {/if} diff --git a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte index 9adbb514e..a0b17f774 100644 --- a/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte +++ b/src/routes/(console)/organization-[organization]/billing/replaceCard.svelte @@ -5,12 +5,13 @@ import { sdk } from '$lib/stores/sdk'; import type { Organization } from '$lib/stores/organization'; import { Dependencies } from '$lib/constants'; - import { submitStripeCard } from '$lib/stores/stripe'; + import { setPaymentMethod, submitStripeCard } from '$lib/stores/stripe'; import { onMount } from 'svelte'; - import type { PaymentList } from '$lib/sdk/billing'; + import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing'; import { addNotification } from '$lib/stores/notifications'; import { Submit, trackError, trackEvent } from '$lib/actions/analytics'; import { PaymentBoxes } from '$lib/components/billing'; + import type { PaymentMethod } from '@stripe/stripe-js'; export let organization: Organization; export let show = false; @@ -20,6 +21,9 @@ let name: string; let error: string; let selectedPaymentMethodId: string; + let showState: boolean = false; + let state: string = ''; + let paymentMethod: PaymentMethod | null = null; onMount(async () => { if (!organization.paymentMethodId && !organization.backupPaymentMethodId) { @@ -41,7 +45,24 @@ async function handleSubmit() { try { if (selectedPaymentMethodId === '$new') { - const method = await submitStripeCard(name, organization.$id); + if (showState && !state) { + throw Error('Please select a state'); + } + let method: PaymentMethodData; + if (showState) { + method = await setPaymentMethod(paymentMethod.id, name, state); + } else { + const card = await submitStripeCard(name, organization.$id); + if (card && Object.hasOwn(card, 'id')) { + if ((card as PaymentMethod).card.country === 'US') { + paymentMethod = card as PaymentMethod; + showState = true; + return; + } + } else if (card && Object.hasOwn(card, '$id')) { + method = card as PaymentMethodData; + } + } selectedPaymentMethodId = method.$id; } isBackup @@ -97,6 +118,9 @@ { @@ -48,7 +57,24 @@ try { if (paymentMethodId === null) { try { - const method = await submitStripeCard(name, $organization.$id); + if (showState && !state) { + throw Error('Please select a state'); + } + let method: PaymentMethodData; + if (showState) { + method = await setPaymentMethod(paymentMethod.id, name, state); + } else { + const card = await submitStripeCard(name, $organization.$id); + if (card && Object.hasOwn(card, 'id')) { + if ((card as PaymentMethod).card.country === 'US') { + paymentMethod = card as PaymentMethod; + showState = true; + return; + } + } else if (card && Object.hasOwn(card, '$id')) { + method = card as PaymentMethodData; + } + } const card = await sdk.forConsole.billing.getPaymentMethod(method.$id); if (card?.last4) { paymentMethodId = card.$id; @@ -131,6 +157,9 @@ import { WizardStep } from '$lib/layout'; import { onMount } from 'svelte'; - import type { PaymentList } from '$lib/sdk/billing'; + import type { PaymentList, PaymentMethodData } from '$lib/sdk/billing'; import { invalidate } from '$app/navigation'; import { Dependencies } from '$lib/constants'; - import { isStripeInitialized, submitStripeCard } from '$lib/stores/stripe'; + import { isStripeInitialized, setPaymentMethod, submitStripeCard } from '$lib/stores/stripe'; import { sdk } from '$lib/stores/sdk'; import { PaymentBoxes } from '$lib/components/billing'; import { addCreditWizardStore } from '../store'; import { organization } from '$lib/stores/organization'; + import type { PaymentMethod } from '@stripe/stripe-js'; let methods: PaymentList; let name: string; + let showState: boolean = false; + let state: string = ''; + let paymentMethod: PaymentMethod | null = null; onMount(async () => { methods = await sdk.forConsole.billing.listPaymentMethods(); @@ -21,7 +25,24 @@ async function handleSubmit() { try { - const method = await submitStripeCard(name, $organization.$id); + if (showState && !state) { + throw Error('Please select a state'); + } + let method: PaymentMethodData; + if (showState) { + method = await setPaymentMethod(paymentMethod.id, name, state); + } else { + const card = await submitStripeCard(name, $organization.$id); + if (card && Object.hasOwn(card, 'id')) { + if ((card as PaymentMethod).card.country === 'US') { + paymentMethod = card as PaymentMethod; + showState = true; + return; + } + } else if (card && Object.hasOwn(card, '$id')) { + method = card as PaymentMethodData; + } + } $addCreditWizardStore.paymentMethodId = method.$id; invalidate(Dependencies.PAYMENT_METHODS); } catch (e) { @@ -45,6 +66,9 @@

Payment method

diff --git a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte index 4b45f7261..0089dc37d 100644 --- a/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte +++ b/src/routes/(console)/organization-[organization]/domains/domain-[domain]/domainMetrics.svelte @@ -5,12 +5,17 @@ import { Link } from '$lib/elements'; import type { Models } from '@appwrite.io/console'; - let { domain, retryVerification }: { domain: Models.Domain; retryVerification: () => void } = - $props(); + let { + domain, + retryVerification + }: { + domain: Models.Domain; + retryVerification: () => void; + } = $props(); - const isDomainVerified = domain.nameservers.toLowerCase() === 'appwrite'; + const isDomainVerified = $derived(domain.nameservers.toLowerCase() === 'appwrite'); - const metrics = [ + const metrics = $derived([ { value: isDomainVerified ? 'Verified' : 'Not verified', description: 'Status' @@ -40,7 +45,7 @@ value: domain?.renewalPrice || '-', description: 'Renewal price' } - ]; + ]); diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte index f953c690e..788922eb4 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/appleOAuth.svelte +++ b/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} /> - - - + bind:value={appId} + required /> + + + To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -73,10 +74,13 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte index 510359bc3..5f97318c8 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/auth0OAuth.svelte +++ b/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 /> + bind:value={clientSecret} + required /> + placeholder="your-tenant.auth0.com" + bind:value={auth0Domain} + required /> To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -77,10 +80,12 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte index 0c986847f..d367dbd77 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/authentikOAuth.svelte +++ b/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 /> + bind:value={clientSecret} + required /> + bind:value={authentikDomain} + required /> To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -81,10 +84,12 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte index 5c54a1942..c434ebd5a 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/gitlabOAuth.svelte +++ b/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 /> - + bind:value={clientSecret} + required /> + To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -76,10 +74,11 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte index c56d54ff5..cf01f41a9 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/googleOAuth.svelte +++ b/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 /> + bind:value={secret} + required /> 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 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte index 85fcdb91d..8e33f1022 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/mainOAuth.svelte +++ b/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 /> + bind:value={secret} + required /> To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -73,9 +75,9 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte index 253c7b429..782df6879 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte +++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/microsoftOAuth.svelte @@ -42,9 +42,8 @@ clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret; - - {provider.name} OAuth2 settings -

+ +

To use {provider.name} authentication in your application, first fill in this form. For more info you can @@ -57,13 +56,15 @@ label="Application (client) ID" autofocus={true} placeholder="Enter ID" - bind:value={appId} /> + bind:value={appId} + required /> + bind:value={clientSecret} + required /> diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte index 90a61e14f..40637fb91 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oidcOAuth.svelte +++ b/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 /> + bind:value={clientSecret} + required /> + bind:value={wellKnownEndpoint} + required={!authorizationEndpoint && !tokenEndpoint && !userinfoEndpoint} /> + bind:value={authorizationEndpoint} + required={!wellKnownEndpoint} /> + bind:value={tokenEndpoint} + required={!wellKnownEndpoint} /> + bind:value={userinfoEndpoint} + required={!wellKnownEndpoint} /> To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -115,10 +121,13 @@ diff --git a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte index f1c7a30be..65e832d3b 100644 --- a/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte +++ b/src/routes/(console)/project-[region]-[project]/auth/(providers)/oktaOAuth.svelte @@ -47,9 +47,14 @@ : provider.secret; - - {provider.name} OAuth2 settings -

+ +

To use {provider.name} authentication in your application, first fill in this form. For more info you can + bind:value={appId} + required /> + bind:value={clientSecret} + required /> + bind:value={oktaDomain} + required /> + bind:value={authorizationServerId} + required /> To complete set up, add this OAuth2 redirect URI to your {provider.name} app configuration. @@ -88,10 +97,13 @@ diff --git a/svelte.config.js b/svelte.config.js index 2939a3e1b..18b668790 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -26,7 +26,7 @@ const config = { precompress: true }), paths: { - base: '/console' + base: process.env.PREVIEW ? '' : '/console' } }, vitePlugin: {