mirror of
https://github.com/appwrite/console.git
synced 2026-06-06 19:27:48 +00:00
fix: upgrade to newest appwrite
This commit is contained in:
Torsten Dittmann
Generated
+7
-7
@@ -8,7 +8,7 @@
|
||||
"name": "@appwrite/console",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@aw-labs/appwrite-console": "^6.0.0",
|
||||
"@aw-labs/appwrite-console": "^10.0.0",
|
||||
"@aw-labs/icons": "0.0.0-66",
|
||||
"@aw-labs/ui": "0.0.0-66",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
@@ -71,9 +71,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@aw-labs/appwrite-console": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
|
||||
"integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
|
||||
"integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
|
||||
"dependencies": {
|
||||
"cross-fetch": "3.1.5",
|
||||
"isomorphic-form-data": "2.0.0"
|
||||
@@ -7782,9 +7782,9 @@
|
||||
}
|
||||
},
|
||||
"@aw-labs/appwrite-console": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-6.0.0.tgz",
|
||||
"integrity": "sha512-g4sCMGiIptDUyKhJSfiKsG/gzqMIt3MQCdqod6bNWMunbXUqN7DeA0BT4MuTeVGdQuoOKuSmgHeExatlu0Dh9Q==",
|
||||
"version": "10.0.0",
|
||||
"resolved": "https://registry.npmjs.org/@aw-labs/appwrite-console/-/appwrite-console-10.0.0.tgz",
|
||||
"integrity": "sha512-YyEQ5SIhkvI/Axt/EOkAqKcMTkfEpQt7W1q91lWKQ+Hm9woMzYUcf8KThBnMvEFbphWQRaJKLtfpr8EJjCjm4w==",
|
||||
"requires": {
|
||||
"cross-fetch": "3.1.5",
|
||||
"isomorphic-form-data": "2.0.0"
|
||||
|
||||
+1
-1
@@ -19,7 +19,7 @@
|
||||
"e2e": "playwright test tests/e2e"
|
||||
},
|
||||
"dependencies": {
|
||||
"@aw-labs/appwrite-console": "^6.0.0",
|
||||
"@aw-labs/appwrite-console": "^10.0.0",
|
||||
"@aw-labs/icons": "0.0.0-66",
|
||||
"@aw-labs/ui": "0.0.0-66",
|
||||
"@popperjs/core": "^2.11.6",
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { Alert } from '$lib/components';
|
||||
|
||||
export let show = false;
|
||||
@@ -13,6 +13,10 @@
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
onMount(() => {
|
||||
if (show) openModal();
|
||||
});
|
||||
|
||||
function handleBLur(event: MouseEvent) {
|
||||
if (event.target === dialog) {
|
||||
closeModal();
|
||||
|
||||
+116
-277
@@ -7,12 +7,8 @@ import Okta from '../../routes/console/project-[project]/authentication/_oktaOAu
|
||||
import Auth0 from '../../routes/console/project-[project]/authentication/_auth0OAuth.svelte';
|
||||
import Main from '../../routes/console/project-[project]/authentication/_mainOAuth.svelte';
|
||||
|
||||
export type Provider = {
|
||||
name: string;
|
||||
export type Provider = Models.Provider & {
|
||||
icon: string;
|
||||
active: boolean;
|
||||
id: string | null;
|
||||
secret: string | null;
|
||||
docs?: string;
|
||||
component?: typeof SvelteComponent;
|
||||
};
|
||||
@@ -22,279 +18,122 @@ export type Providers = {
|
||||
};
|
||||
|
||||
const setProviders = (project: Models.Project): Provider[] => {
|
||||
return [
|
||||
{
|
||||
name: 'Amazon',
|
||||
icon: 'amazon',
|
||||
active: false,
|
||||
id: project?.providerAmazonAppid,
|
||||
secret: project?.providerAmazonSecret,
|
||||
docs: 'https://developer.amazon.com/apps-and-games/services-and-apis',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Apple',
|
||||
icon: 'apple',
|
||||
active: false,
|
||||
id: project?.providerAppleAppid,
|
||||
secret: project?.providerAppleSecret,
|
||||
docs: 'https://developer.apple.com/',
|
||||
component: Apple
|
||||
},
|
||||
{
|
||||
name: 'Auth0',
|
||||
icon: 'auth0',
|
||||
active: false,
|
||||
id: project?.providerAuth0Appid,
|
||||
secret: project?.providerAuth0Secret,
|
||||
docs: 'https://auth0.com/developers',
|
||||
component: Auth0
|
||||
},
|
||||
{
|
||||
name: 'Bitbucket',
|
||||
icon: 'bitBucket',
|
||||
active: false,
|
||||
id: project?.providerBitbucketAppid,
|
||||
secret: project?.providerBitbucketSecret,
|
||||
docs: 'https://developer.atlassian.com/bitbucket',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Bitly',
|
||||
icon: 'bitly',
|
||||
active: false,
|
||||
id: project?.providerBitlyAppid,
|
||||
secret: project?.providerBitlySecret,
|
||||
docs: 'https://dev.bitly.com/v4_documentation.html',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Box',
|
||||
icon: 'box',
|
||||
active: false,
|
||||
id: project?.providerBoxAppid,
|
||||
secret: project?.providerBoxSecret,
|
||||
docs: 'https://developer.box.com/reference/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Discord',
|
||||
icon: 'discord',
|
||||
active: false,
|
||||
id: project?.providerDiscordAppid,
|
||||
secret: project?.providerDiscordSecret,
|
||||
docs: 'https://discordapp.com/developers/docs/topics/oauth2',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Dropbox',
|
||||
icon: 'dropbox',
|
||||
active: false,
|
||||
id: project?.providerDropboxAppid,
|
||||
secret: project?.providerDropboxSecret,
|
||||
docs: 'https://www.dropbox.com/developers/documentation',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Facebook',
|
||||
icon: 'facebook',
|
||||
active: false,
|
||||
id: project?.providerFacebookAppid,
|
||||
secret: project?.providerFacebookSecret,
|
||||
docs: 'https://developers.facebook.com/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Github',
|
||||
icon: 'github',
|
||||
active: false,
|
||||
id: project?.providerGithubAppid,
|
||||
secret: project?.providerGithubSecret,
|
||||
docs: 'https://developer.github.com/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Gitlab',
|
||||
icon: 'gitlab',
|
||||
active: false,
|
||||
id: project?.providerGitlabAppid,
|
||||
secret: project?.providerGitlabSecret,
|
||||
docs: 'https://docs.gitlab.com/ee/api/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Google',
|
||||
icon: 'google',
|
||||
active: false,
|
||||
id: project?.providerGoogleAppid,
|
||||
secret: project?.providerGoogleSecret,
|
||||
docs: 'https://support.google.com/googleapi/answer/6158849',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Linkedin',
|
||||
icon: 'linkedin',
|
||||
active: false,
|
||||
id: project?.providerLinkedinAppid,
|
||||
secret: project?.providerLinkedinSecret,
|
||||
docs: 'https://developer.linkedin.com/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Microsoft',
|
||||
icon: 'microsoft',
|
||||
active: false,
|
||||
id: project?.providerMicrosoftAppid,
|
||||
secret: project?.providerMicrosoftSecret,
|
||||
docs: 'https://developer.microsoft.com/en-us/',
|
||||
component: Microsoft
|
||||
},
|
||||
{
|
||||
name: 'Notion',
|
||||
icon: 'notion',
|
||||
active: false,
|
||||
id: project?.providerNotionAppid,
|
||||
secret: project?.providerNotionSecret,
|
||||
docs: 'https://developers.notion.com/docs',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Okta',
|
||||
icon: 'okta',
|
||||
active: false,
|
||||
id: project?.providerOktaAppid,
|
||||
secret: project?.providerOktaSecret,
|
||||
docs: 'https://developer.okta.com/',
|
||||
component: Okta
|
||||
},
|
||||
{
|
||||
name: 'Paypal',
|
||||
icon: 'paypal',
|
||||
active: false,
|
||||
id: project?.providerPaypalAppid,
|
||||
secret: project?.providerPaypalSecret,
|
||||
docs: 'https://developer.paypal.com/docs/api/overview/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Paypal (sandbox)',
|
||||
icon: 'paypal',
|
||||
active: false,
|
||||
id: project?.providerPaypalSandboxAppid,
|
||||
secret: project?.providerPaypalSandboxSecret,
|
||||
docs: 'https://developer.paypal.com/docs/api/overview/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Salesforce',
|
||||
icon: 'salesforce',
|
||||
active: false,
|
||||
id: project?.providerSalesforceAppid,
|
||||
secret: project?.providerSalesforceSecret,
|
||||
docs: 'https://developer.salesforce.com/docs/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Slack',
|
||||
icon: 'slack',
|
||||
active: false,
|
||||
id: project?.providerSlackAppid,
|
||||
secret: project?.providerSlackSecret,
|
||||
docs: 'https://api.slack.com/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Spotify',
|
||||
icon: 'spotify',
|
||||
active: false,
|
||||
id: project?.providerSpotifyAppid,
|
||||
secret: project?.providerSpotifySecret,
|
||||
docs: 'https://developer.spotify.com/documentation/general/guides/authorization-guide/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Stripe',
|
||||
icon: 'stripe',
|
||||
active: false,
|
||||
id: project?.providerStripeAppid,
|
||||
secret: project?.providerStripeSecret,
|
||||
docs: 'https://stripe.com/docs/api',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Tradeshift',
|
||||
icon: 'tradeshift',
|
||||
active: false,
|
||||
id: project?.providerTradeshiftAppid,
|
||||
secret: project?.providerTradeshiftSecret,
|
||||
docs: 'https://developers.tradeshift.com/docs/api',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Tradeshift(sandbox)',
|
||||
icon: 'tradeshift',
|
||||
active: false,
|
||||
id: project?.providerTradeshiftBoxAppid,
|
||||
secret: project?.providerTradeshiftBoxSecret,
|
||||
docs: 'https://developers.tradeshift.com/docs/api',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Twitch',
|
||||
icon: 'twitch',
|
||||
active: false,
|
||||
id: project?.providerTwitchAppid,
|
||||
secret: project?.providerTwitchSecret,
|
||||
docs: 'https://dev.twitch.tv/docs/authentication',
|
||||
component: Main
|
||||
},
|
||||
return (
|
||||
project?.providers.map((n) => {
|
||||
let docs: Provider['docs'];
|
||||
let icon: Provider['icon'] = n.name.toLowerCase();
|
||||
let component: Provider['component'] = Main;
|
||||
|
||||
{
|
||||
name: 'Wordpress',
|
||||
icon: 'wordpress',
|
||||
active: false,
|
||||
id: project?.providerWordpressAppid,
|
||||
secret: project?.providerWordpressSecret,
|
||||
docs: 'https://developer.wordpress.com/docs/oauth2/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Yahoo',
|
||||
icon: 'yahoo',
|
||||
active: false,
|
||||
id: project?.providerYahooAppid,
|
||||
secret: project?.providerYahooSecret,
|
||||
docs: 'https://developer.yahoo.com/oauth2/guide/flows_authcode/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Yammer',
|
||||
icon: 'ms_yammer',
|
||||
active: false,
|
||||
id: project?.providerYammerAppid,
|
||||
secret: project?.providerYammerSecret,
|
||||
docs: 'https://developer.yammer.com/docs/oauth-2',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Yandex',
|
||||
icon: 'yandex',
|
||||
active: false,
|
||||
id: project?.providerYandexAppid,
|
||||
secret: project?.providerYandexSecret,
|
||||
docs: 'https://tech.yandex.com/oauth/',
|
||||
component: Main
|
||||
},
|
||||
{
|
||||
name: 'Zoom',
|
||||
icon: 'zoom',
|
||||
active: false,
|
||||
id: project?.providerZoomAppid,
|
||||
secret: project?.providerZoomSecret,
|
||||
docs: 'https://marketplace.zoom.us/docs/guides/auth/oauth/',
|
||||
component: Main
|
||||
}
|
||||
];
|
||||
switch (n.name.toLowerCase()) {
|
||||
case 'amazon':
|
||||
docs = 'https://developer.amazon.com/apps-and-games/services-and-apis';
|
||||
break;
|
||||
case 'apple':
|
||||
docs = 'https://developer.apple.com/';
|
||||
component = Apple;
|
||||
break;
|
||||
case 'auth0':
|
||||
docs = 'https://auth0.com/developers';
|
||||
component = Auth0;
|
||||
break;
|
||||
case 'bitbucket':
|
||||
docs = 'https://developer.atlassian.com/bitbucket';
|
||||
break;
|
||||
case 'bitly':
|
||||
docs = 'https://dev.bitly.com/v4_documentation.html';
|
||||
break;
|
||||
case 'box':
|
||||
docs = 'https://developer.box.com/reference/';
|
||||
break;
|
||||
case 'discord':
|
||||
docs = 'https://discordapp.com/developers/docs/topics/oauth2';
|
||||
break;
|
||||
case 'dropbox':
|
||||
docs = 'https://www.dropbox.com/developers/documentation';
|
||||
break;
|
||||
case 'facebook':
|
||||
docs = 'https://developers.facebook.com/';
|
||||
break;
|
||||
case 'github':
|
||||
docs = 'https://developer.github.com';
|
||||
break;
|
||||
case 'gitlab':
|
||||
docs = 'https://docs.gitlab.com/ee/api/';
|
||||
break;
|
||||
case 'google':
|
||||
docs = 'https://support.google.com/googleapi/answer/6158849';
|
||||
break;
|
||||
case 'linkedin':
|
||||
docs = 'https://developer.linkedin.com/';
|
||||
break;
|
||||
case 'microsoft':
|
||||
docs = 'https://developer.microsoft.com/en-us/';
|
||||
component = Microsoft;
|
||||
break;
|
||||
case 'notion':
|
||||
docs = 'https://developers.notion.com/docs';
|
||||
break;
|
||||
case 'okta':
|
||||
docs = 'https://developer.okta.com';
|
||||
component = Okta;
|
||||
break;
|
||||
case 'paypal':
|
||||
docs = 'https://developer.paypal.com/docs/api/overview/';
|
||||
break;
|
||||
case 'paypalsandbox':
|
||||
icon = 'paypal';
|
||||
docs = 'https://developer.paypal.com/docs/api/overview/';
|
||||
break;
|
||||
case 'salesforce':
|
||||
docs = 'https://developer.salesforce.com/docs/';
|
||||
break;
|
||||
case 'slack':
|
||||
docs = 'https://api.slack.com/';
|
||||
break;
|
||||
case 'spotify':
|
||||
docs =
|
||||
'https://developer.spotify.com/documentation/general/guides/authorization-guide/';
|
||||
break;
|
||||
case 'stripe':
|
||||
docs = 'https://stripe.com/docs/api';
|
||||
break;
|
||||
case 'tradeshift':
|
||||
docs = 'https://developers.tradeshift.com/docs/api';
|
||||
break;
|
||||
case 'tradeshiftbox':
|
||||
icon = 'tradeshift';
|
||||
docs = 'https://developers.tradeshift.com/docs/api';
|
||||
break;
|
||||
case 'twitch':
|
||||
docs = 'https://dev.twitch.tv/docs/authentication';
|
||||
break;
|
||||
case 'wordpress':
|
||||
docs = 'https://developer.wordpress.com/docs/oauth2/';
|
||||
break;
|
||||
case 'yahoo':
|
||||
docs = 'https://developer.yahoo.com/oauth2/guide/flows_authcode/';
|
||||
break;
|
||||
case 'yammer':
|
||||
docs = 'https://developer.yammer.com/docs/oauth-2';
|
||||
break;
|
||||
case 'yandex':
|
||||
docs = 'https://tech.yandex.com/oauth/';
|
||||
break;
|
||||
case 'zoom':
|
||||
docs = 'https://marketplace.zoom.us/docs/guides/auth/oauth/';
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
return {
|
||||
...n,
|
||||
icon,
|
||||
docs,
|
||||
component
|
||||
};
|
||||
}) ?? []
|
||||
);
|
||||
};
|
||||
|
||||
function createOAuthProviders() {
|
||||
|
||||
@@ -19,7 +19,12 @@
|
||||
try {
|
||||
loading = true;
|
||||
const org = await createOrganization();
|
||||
const project = await sdkForConsole.projects.create(id ?? ID.unique(), name, org.$id);
|
||||
const project = await sdkForConsole.projects.create(
|
||||
id ?? ID.unique(),
|
||||
name,
|
||||
org.$id,
|
||||
'default'
|
||||
);
|
||||
await invalidate(Dependencies.ACCOUNT);
|
||||
goto(`/console/project-${project.$id}`);
|
||||
} catch ({ message }) {
|
||||
|
||||
@@ -18,7 +18,12 @@
|
||||
|
||||
const create = async () => {
|
||||
try {
|
||||
const project = await sdkForConsole.projects.create(id ?? 'unique()', name, teamId);
|
||||
const project = await sdkForConsole.projects.create(
|
||||
id ?? 'unique()',
|
||||
name,
|
||||
teamId,
|
||||
'default'
|
||||
);
|
||||
dispatch('created', project);
|
||||
addNotification({
|
||||
type: 'success',
|
||||
|
||||
@@ -7,18 +7,17 @@
|
||||
import type { Provider } from '$lib/stores/oauth-providers';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showModal = false;
|
||||
export let provider: Provider;
|
||||
|
||||
let id: string = null;
|
||||
let active = false;
|
||||
let appId: string = null;
|
||||
let enabled = false;
|
||||
let keyID: string = null;
|
||||
let teamID: string = null;
|
||||
let p8: string = null;
|
||||
|
||||
onMount(() => {
|
||||
id ??= provider.id;
|
||||
active ??= provider.active;
|
||||
appId ??= provider.appId;
|
||||
enabled ??= provider.enabled;
|
||||
if (provider.secret) ({ keyID, teamID, p8 } = JSON.parse(provider.secret));
|
||||
});
|
||||
|
||||
@@ -30,17 +29,17 @@
|
||||
await sdkForConsole.projects.updateOAuth2(
|
||||
projectId,
|
||||
provider.name.toLowerCase(),
|
||||
id,
|
||||
secret
|
||||
appId,
|
||||
secret,
|
||||
enabled
|
||||
);
|
||||
provider.active = active;
|
||||
provider.id = id;
|
||||
provider.enabled = enabled;
|
||||
provider.appId = appId;
|
||||
provider.secret = secret;
|
||||
showModal = false;
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: `${provider.name} authentication has been ${
|
||||
provider.active ? 'enabled' : 'disabled'
|
||||
provider.enabled ? 'enabled' : 'disabled'
|
||||
}`
|
||||
});
|
||||
} catch ({ message }) {
|
||||
@@ -51,7 +50,7 @@
|
||||
$: secret = keyID && teamID && p8 ? JSON.stringify({ keyID, teamID, p8 }) : provider.secret;
|
||||
</script>
|
||||
|
||||
<Modal {error} on:submit={update} size="big" bind:show={showModal}>
|
||||
<Modal {error} on:submit={update} size="big" show on:close>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
@@ -61,13 +60,13 @@
|
||||
visit the docs.
|
||||
</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="bundleID"
|
||||
label="Bundle ID"
|
||||
autofocus={true}
|
||||
placeholder="com.company.appname"
|
||||
bind:value={id} />
|
||||
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} />
|
||||
@@ -83,12 +82,12 @@
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={(secret === provider.secret &&
|
||||
active === provider.active &&
|
||||
id === provider.id) ||
|
||||
!(id && keyID && teamID && p8)}
|
||||
enabled === provider.enabled &&
|
||||
appId === provider.appId) ||
|
||||
!(appId && keyID && teamID && p8)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -7,18 +7,17 @@
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showModal = false;
|
||||
export let provider: Provider;
|
||||
|
||||
let id: string = null;
|
||||
let active = false;
|
||||
let appId: string = null;
|
||||
let enabled = false;
|
||||
let clientSecret: string = null;
|
||||
let auth0Domain: string = null;
|
||||
let error: string;
|
||||
|
||||
onMount(() => {
|
||||
id ??= provider.id;
|
||||
active ??= provider.active;
|
||||
appId ??= provider.appId;
|
||||
enabled ??= provider.enabled;
|
||||
if (provider.secret) ({ clientSecret, auth0Domain } = JSON.parse(provider.secret));
|
||||
});
|
||||
|
||||
@@ -28,17 +27,17 @@
|
||||
await sdkForConsole.projects.updateOAuth2(
|
||||
projectId,
|
||||
provider.name.toLowerCase(),
|
||||
id,
|
||||
secret
|
||||
appId,
|
||||
secret,
|
||||
enabled
|
||||
);
|
||||
provider.active = active;
|
||||
provider.id = id;
|
||||
provider.enabled = enabled;
|
||||
provider.appId = appId;
|
||||
provider.secret = secret;
|
||||
showModal = false;
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: `${provider.name} authentication has been ${
|
||||
provider.active ? 'enabled' : 'disabled'
|
||||
provider.enabled ? 'enabled' : 'disabled'
|
||||
}`
|
||||
});
|
||||
} catch ({ message }) {
|
||||
@@ -52,7 +51,7 @@
|
||||
: provider.secret;
|
||||
</script>
|
||||
|
||||
<Modal {error} size="big" bind:show={showModal} on:submit={update}>
|
||||
<Modal {error} size="big" show on:submit={update} on:close>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
@@ -61,13 +60,13 @@
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="clientID"
|
||||
label="Client ID"
|
||||
autofocus={true}
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
bind:value={appId} />
|
||||
<InputPassword
|
||||
id="secret"
|
||||
label="Client Secret"
|
||||
@@ -92,12 +91,12 @@
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={(secret === provider.secret &&
|
||||
active === provider.active &&
|
||||
id === provider.id) ||
|
||||
!(id && clientSecret && auth0Domain)}
|
||||
enabled === provider.enabled &&
|
||||
appId === provider.appId) ||
|
||||
!(appId && clientSecret && auth0Domain)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -7,38 +7,39 @@
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showModal = false;
|
||||
export let provider: Provider;
|
||||
|
||||
const projectId = $page.params.project;
|
||||
|
||||
let active = false;
|
||||
let id: string = null;
|
||||
let enabled = false;
|
||||
let appId: string = null;
|
||||
let secret: string = null;
|
||||
|
||||
onMount(() => {
|
||||
active ??= provider.active;
|
||||
id ??= provider.id;
|
||||
enabled ??= provider.enabled;
|
||||
appId ??= provider.appId;
|
||||
secret ??= provider.secret;
|
||||
});
|
||||
|
||||
let error: string;
|
||||
|
||||
const update = async () => {
|
||||
console.log(provider);
|
||||
try {
|
||||
await sdkForConsole.projects.updateOAuth2(
|
||||
projectId,
|
||||
provider.name.toLowerCase(),
|
||||
id,
|
||||
secret
|
||||
appId,
|
||||
secret,
|
||||
enabled
|
||||
);
|
||||
provider.active = active;
|
||||
provider.id = id;
|
||||
provider.enabled = enabled;
|
||||
provider.appId = appId;
|
||||
provider.secret = secret;
|
||||
showModal = false;
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: `${provider.name} authentication has been ${
|
||||
provider.active ? 'enabled' : 'disabled'
|
||||
provider.enabled ? 'enabled' : 'disabled'
|
||||
}`
|
||||
});
|
||||
} catch ({ message }) {
|
||||
@@ -47,7 +48,7 @@
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal {error} size="big" bind:show={showModal} on:submit={update}>
|
||||
<Modal {error} size="big" show on:submit={update} on:close>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
@@ -56,13 +57,13 @@
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="appID"
|
||||
label="App ID"
|
||||
autofocus={true}
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
bind:value={appId} />
|
||||
<InputPassword
|
||||
id="secret"
|
||||
label="App Secret"
|
||||
@@ -82,11 +83,13 @@
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={!id ||
|
||||
disabled={!appId ||
|
||||
!secret ||
|
||||
(id === provider.id && secret === provider.secret && active === provider.active)}
|
||||
(appId === provider.appId &&
|
||||
secret === provider.secret &&
|
||||
enabled === provider.enabled)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -7,18 +7,17 @@
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showModal = false;
|
||||
export let provider: Provider;
|
||||
|
||||
let id: string = null;
|
||||
let active = false;
|
||||
let appId: string = null;
|
||||
let enabled = false;
|
||||
let clientSecret: string = null;
|
||||
let tenantID: string = null;
|
||||
let error: string;
|
||||
|
||||
onMount(() => {
|
||||
id ??= provider.id;
|
||||
active ??= provider.active;
|
||||
appId ??= provider.appId;
|
||||
enabled ??= provider.enabled;
|
||||
if (provider.secret) ({ clientSecret, tenantID } = JSON.parse(provider.secret));
|
||||
});
|
||||
|
||||
@@ -29,18 +28,18 @@
|
||||
await sdkForConsole.projects.updateOAuth2(
|
||||
projectId,
|
||||
provider.name.toLowerCase(),
|
||||
id,
|
||||
secret
|
||||
appId,
|
||||
secret,
|
||||
enabled
|
||||
);
|
||||
provider.active = active;
|
||||
provider.id = id;
|
||||
provider.enabled = enabled;
|
||||
provider.appId = appId;
|
||||
provider.secret = secret;
|
||||
|
||||
showModal = false;
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: `${provider.name} authentication has been ${
|
||||
provider.active ? 'enabled' : 'disabled'
|
||||
provider.enabled ? 'enabled' : 'disabled'
|
||||
}`
|
||||
});
|
||||
} catch ({ message }) {
|
||||
@@ -52,7 +51,7 @@
|
||||
clientSecret && tenantID ? JSON.stringify({ clientSecret, tenantID }) : provider.secret;
|
||||
</script>
|
||||
|
||||
<Modal {error} on:submit={update} size="big" bind:show={showModal}>
|
||||
<Modal {error} on:submit={update} size="big" show on:close>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
@@ -62,13 +61,13 @@
|
||||
visit the docs.
|
||||
</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="appID"
|
||||
label="Application (client) ID"
|
||||
autofocus={true}
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
bind:value={appId} />
|
||||
<InputPassword
|
||||
id="secret"
|
||||
label="Client Secret"
|
||||
@@ -93,12 +92,12 @@
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={(secret === provider.secret &&
|
||||
active === provider.active &&
|
||||
id === provider.id) ||
|
||||
!(id && clientSecret && tenantID)}
|
||||
enabled === provider.enabled &&
|
||||
appId === provider.appId) ||
|
||||
!(appId && clientSecret && tenantID)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -7,18 +7,17 @@
|
||||
import { addNotification } from '$lib/stores/notifications';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let showModal = false;
|
||||
export let provider: Provider;
|
||||
|
||||
let id: string = null;
|
||||
let active = false;
|
||||
let appId: string = null;
|
||||
let enabled = false;
|
||||
let clientSecret: string = null;
|
||||
let oktaDomain: string = null;
|
||||
let authorizationServerId: string = null;
|
||||
|
||||
onMount(() => {
|
||||
id ??= provider.id;
|
||||
active ??= provider.active;
|
||||
appId ??= provider.appId;
|
||||
enabled ??= provider.enabled;
|
||||
if (provider.secret)
|
||||
({ clientSecret, oktaDomain, authorizationServerId } = JSON.parse(provider.secret));
|
||||
});
|
||||
@@ -32,17 +31,16 @@
|
||||
await sdkForConsole.projects.updateOAuth2(
|
||||
projectId,
|
||||
provider.name.toLowerCase(),
|
||||
id,
|
||||
appId,
|
||||
secret
|
||||
);
|
||||
provider.active = active;
|
||||
provider.id = id;
|
||||
provider.enabled = enabled;
|
||||
provider.appId = appId;
|
||||
provider.secret = secret;
|
||||
showModal = false;
|
||||
addNotification({
|
||||
type: 'success',
|
||||
message: `${provider.name} authentication has been ${
|
||||
provider.active ? 'enabled' : 'disabled'
|
||||
provider.enabled ? 'enabled' : 'disabled'
|
||||
}`
|
||||
});
|
||||
} catch ({ message }) {
|
||||
@@ -56,7 +54,7 @@
|
||||
: provider.secret;
|
||||
</script>
|
||||
|
||||
<Modal {error} on:submit={update} size="big" bind:show={showModal}>
|
||||
<Modal {error} on:submit={update} size="big" show on:close>
|
||||
<svelte:fragment slot="header">{provider.name} OAuth2 Settings</svelte:fragment>
|
||||
<FormList>
|
||||
<p>
|
||||
@@ -65,13 +63,13 @@
|
||||
<a class="link" href={provider.docs} target="_blank" rel="noopener noreferrer"
|
||||
>visit the docs.</a>
|
||||
</p>
|
||||
<InputSwitch id="state" bind:value={active} label={active ? 'Enabled' : 'Disabled'} />
|
||||
<InputSwitch id="state" bind:value={enabled} label={enabled ? 'Enabled' : 'Disabled'} />
|
||||
<InputText
|
||||
id="appID"
|
||||
label="Client ID"
|
||||
autofocus={true}
|
||||
placeholder="Enter ID"
|
||||
bind:value={id} />
|
||||
bind:value={appId} />
|
||||
<InputPassword
|
||||
id="secret"
|
||||
label="Client Secret"
|
||||
@@ -102,12 +100,12 @@
|
||||
</div>
|
||||
</FormList>
|
||||
<svelte:fragment slot="footer">
|
||||
<Button secondary on:click={() => (showModal = false)}>Cancel</Button>
|
||||
<Button secondary on:click={() => (provider = null)}>Cancel</Button>
|
||||
<Button
|
||||
disabled={(secret === provider.secret &&
|
||||
active === provider.active &&
|
||||
id === provider.id) ||
|
||||
!(id && clientSecret && oktaDomain && authorizationServerId)}
|
||||
enabled === provider.enabled &&
|
||||
appId === provider.appId) ||
|
||||
!(appId && clientSecret && oktaDomain && authorizationServerId)}
|
||||
submit>Update</Button>
|
||||
</svelte:fragment>
|
||||
</Modal>
|
||||
|
||||
@@ -15,7 +15,6 @@
|
||||
import { page } from '$app/stores';
|
||||
|
||||
const projectId = $page.params.project;
|
||||
let showModal = false;
|
||||
|
||||
onMount(async () => {
|
||||
authMethods.load($project);
|
||||
@@ -56,9 +55,7 @@
|
||||
label={box.label}
|
||||
id={box.method}
|
||||
bind:value={box.value}
|
||||
on:change={() => {
|
||||
authUpdate(box);
|
||||
}} />
|
||||
on:change={() => authUpdate(box)} />
|
||||
{/each}
|
||||
</ul>
|
||||
</form>
|
||||
@@ -72,7 +69,6 @@
|
||||
class="card u-flex u-flex-vertical u-cross-center"
|
||||
on:click={() => {
|
||||
selectedProvider = provider;
|
||||
showModal = true;
|
||||
}}
|
||||
use:event={{
|
||||
name: 'console_users',
|
||||
@@ -91,8 +87,8 @@
|
||||
</div>
|
||||
<p class="u-margin-block-start-8">{provider.name}</p>
|
||||
<div class="u-margin-block-start-24">
|
||||
<Pill success={provider.active}>
|
||||
{provider.active ? 'enabled' : 'disabled'}
|
||||
<Pill success={provider.enabled}>
|
||||
{provider.enabled ? 'enabled' : 'disabled'}
|
||||
</Pill>
|
||||
</div>
|
||||
</button>
|
||||
@@ -105,6 +101,7 @@
|
||||
{#if selectedProvider}
|
||||
<svelte:component
|
||||
this={selectedProvider.component}
|
||||
provider={selectedProvider}
|
||||
bind:showModal />
|
||||
bind:provider={selectedProvider}
|
||||
on:close={() => (selectedProvider = null)}
|
||||
showModal />
|
||||
{/if}
|
||||
|
||||
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 7.0 KiB After Width: | Height: | Size: 7.0 KiB |
|
Before Width: | Height: | Size: 2.1 KiB After Width: | Height: | Size: 2.1 KiB |
|
Before Width: | Height: | Size: 8.5 KiB After Width: | Height: | Size: 8.5 KiB |
Reference in New Issue
Block a user