Oidc with organizations

.gitignore

@@ -11,4 +11,5 @@ node_modules
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
 /testapp
-.idea/
+.idea/
+tmp/

src/lib/cloud/HyvorBar/BarUser.svelte

@@ -8,7 +8,11 @@
 	import { getCloudContext } from '../CloudContext/cloudContextState.svelte.js';
 
 	const cloudContext = $derived(getCloudContext());
-	const logoutUrl = `${cloudContext.instance}/account/logout`;
+	const logoutUrl = $derived(
+		cloudContext.deployment === 'cloud'
+			? `${cloudContext.instance}/account/logout`
+			: '/api/oidc/logout'
+	);
 </script>
 
 <div class="wrap">

src/lib/cloud/HyvorBar/HyvorBar.svelte

@@ -80,16 +80,21 @@
 					{getName()}
 				</span>
 			</a>
-			<BarProducts mobile={mobileShow} />
 
-			{#if organization}
-				<BarOrganization />
+			{#if deployment === 'cloud'}
+				<BarProducts mobile={mobileShow} />
+
+				{#if organization}
+					<BarOrganization />
+				{/if}
+				<BarLicense name={getName()} />
 			{/if}
-			<BarLicense name={getName()} />
 		</div>
 		<div class="center"></div>
 		<div class="right">
-			<BarNotice />
+			{#if deployment === 'cloud'}
+				<BarNotice />
+			{/if}
 
 			<div class="hidden-on-mobile">
 				{#if deployment === 'cloud'}

src/lib/cloud/OrganizationMembers/OrganizationMembersSearch.svelte

@@ -16,7 +16,7 @@
 	}
 	let { selectedUserId = $bindable(undefined) }: Props = $props();
 
-	const { instance, organization } = getCloudContext();
+	const { instance, organization, deployment } = getCloudContext();
 
 	let search = $state('');
 	let role = $derived(organization?.role);
@@ -138,16 +138,18 @@
 			</div>
 		{/if}
 	</div>
-	<div class="invite-note">
-		Looking for a user outside your organization?
-		{#if role === 'admin' || role === 'manager'}
-			<a href={instance + '/account/org/members?invite'} target="_blank" class="hds-link">
-				Invite them
-			</a>
-		{:else}
-			Ask an admin to invite them
-		{/if} to your organization first.
-	</div>
+	{#if deployment === 'cloud'}
+		<div class="invite-note">
+			Looking for a user outside your organization?
+			{#if role === 'admin' || role === 'manager'}
+				<a href={instance + '/account/org/members?invite'} target="_blank" class="hds-link">
+					Invite them
+				</a>
+			{:else}
+				Ask an admin to invite them
+			{/if} to your organization first.
+		</div>
+	{/if}
 {/if}
 
 <style>

src/lib/cloud/OrganizationMembers/members.ts

@@ -4,14 +4,22 @@ import {
 } from '../CloudContext/cloudContextState.svelte.js';
 
 export async function searchMembers(search: string) {
-	const { instance, organization } = getCloudContext();
+	const { instance, organization, deployment } = getCloudContext();
 
 	const query = new URLSearchParams({
 		organization_id: organization?.id.toString() || '',
 		search
 	});
 
-	const response = await fetch(instance + '/api/v2/cloud/members/search?' + query.toString(), {
+	let url: string;
+
+	if (deployment === 'cloud') {
+		url = instance + '/api/v2/cloud/members/search?' + query.toString();
+	} else {
+		url = '/api/oidc/search?' + query.toString();
+	}
+
+	const response = await fetch(url, {
 		method: 'GET',
 		credentials: 'include'
 	});

src/lib/cloud/OrganizationSwitcher/organizationSwitcherState.svelte.ts

@@ -23,7 +23,12 @@ export async function getMyOrganizations(): Promise<CloudContextOrganization[]>
 	// 	{ id: 4, name: 'Org 4', member_role: 'manager' }
 	// ];
 
-	const { instance } = getCloudContext();
+	const { instance, deployment, organization } = getCloudContext();
+
+	if (deployment !== 'cloud') {
+		loadedOrganizations = organization ? [organization] : [];
+		return loadedOrganizations;
+	}
 
 	const response = await fetch(instance + '/api/v2/cloud/organizations/my', {
 		credentials: 'include'
@@ -36,7 +41,11 @@ export async function getMyOrganizations(): Promise<CloudContextOrganization[]>
 }
 
 export async function switchOrganization(orgId: number): Promise<CloudContextOrganization> {
-	const { instance } = getCloudContext();
+	const { instance, deployment, organization } = getCloudContext();
+
+	if (deployment !== 'cloud') {
+		return organization!;
+	}
 
 	const response = await fetch(instance + '/api/v2/cloud/organizations/switch', {
 		method: 'POST',

src/lib/cloud/ResourceCreator/ResourceCreator.svelte

@@ -1,8 +1,6 @@
 <script lang="ts">
 	import IconButton from '$lib/components/IconButton/IconButton.svelte';
 	import IconX from '@hyvor/icons/IconX';
-	import Button from '$lib/components/Button/Button.svelte';
-	import { onMount, type ComponentProps } from 'svelte';
 	import {
 		getCloudContext,
 		type CloudContextOrganization
@@ -56,7 +54,7 @@
 		ondisplay
 	}: Props = $props();
 
-	const { callbacks, organization } = $derived(getCloudContext());
+	const { callbacks, organization, deployment } = $derived(getCloudContext());
 
 	let orgName = $state('');
 	let orgNameError = $state('');
@@ -130,62 +128,64 @@
 		</div>
 
 		<div class="content">
-			<Accordian
-				title="Organization"
-				belowTitle={organization?.name}
-				show={organizationAccordianOpen}
-				footer={!organization}
-				buttonText="Create Organization"
-				onButtonClick={handleOrganizationCreation}
-				onToggle={() => {
-					organizationAccordianOpen = !organizationAccordianOpen;
+			{#if deployment === 'cloud'}
+				<Accordian
+					title="Organization"
+					belowTitle={organization?.name}
+					show={organizationAccordianOpen}
+					footer={!organization}
+					buttonText="Create Organization"
+					onButtonClick={handleOrganizationCreation}
+					onToggle={() => {
+						organizationAccordianOpen = !organizationAccordianOpen;
 
-					if (organizationAccordianOpen && contentAccordianOpen) {
-						contentAccordianOpen = false;
-					}
-				}}
-				toggleLocked={creatingResource}
-				loading={creatingOrganization}
-			>
-				{#if organization}
-					<div class="org-switcher">
-						<OrganizationSwitcher
-							manageButton={false}
-							createButtonText="Create new organization"
-							createButtonProps={{
-								size: 'medium',
-								color: 'input'
-							}}
-						/>
-					</div>
-				{:else}
-					<div class="org-creator">
-						<FormControl>
-							<TextInput
-								bind:value={orgName}
-								bind:input={orgNameInput}
-								block
-								placeholder="Organization Name"
-								disabled={creatingOrganization}
-								onkeyup={(e) => {
-									if (e.key === 'Enter') {
-										handleOrganizationCreation();
-									}
+						if (organizationAccordianOpen && contentAccordianOpen) {
+							contentAccordianOpen = false;
+						}
+					}}
+					toggleLocked={creatingResource}
+					loading={creatingOrganization}
+				>
+					{#if organization}
+						<div class="org-switcher">
+							<OrganizationSwitcher
+								manageButton={false}
+								createButtonText="Create new organization"
+								createButtonProps={{
+									size: 'medium',
+									color: 'input'
 								}}
 							/>
+						</div>
+					{:else}
+						<div class="org-creator">
+							<FormControl>
+								<TextInput
+									bind:value={orgName}
+									bind:input={orgNameInput}
+									block
+									placeholder="Organization Name"
+									disabled={creatingOrganization}
+									onkeyup={(e) => {
+										if (e.key === 'Enter') {
+											handleOrganizationCreation();
+										}
+									}}
+								/>
 
-							{#if orgNameError}
-								<Validation state="error">{orgNameError}</Validation>
-							{/if}
-						</FormControl>
+								{#if orgNameError}
+									<Validation state="error">{orgNameError}</Validation>
+								{/if}
+							</FormControl>
 
-						<div class="org-note">
-							<IconInfoCircle size={12} />
-							Organizations can be used across HYVOR products.
+							<div class="org-note">
+								<IconInfoCircle size={12} />
+								Organizations can be used across HYVOR products.
+							</div>
 						</div>
-					</div>
-				{/if}
-			</Accordian>
+					{/if}
+				</Accordian>
+			{/if}
 
 			<Accordian
 				title={resourceTitle}

src/routes/test/cloud/+page.svelte

@@ -14,11 +14,32 @@
 	import { goto } from '$app/navigation';
 	import OrganizationMembersSearch from '$lib/cloud/OrganizationMembers/OrganizationMembersSearch.svelte';
 
-	let loading = $state(true);
-	let cloudContext: CloudContextType = $state({} as CloudContextType);
+	let loading = $state(false);
+	let cloudContext: CloudContextType = $state({
+		component: 'core',
+		deployment: 'on-prem',
+		instance: '',
+		user: {
+			id: 1,
+			name: 'Supun',
+			username: 'supun',
+			email: 'supun@hyvor.com',
+			picture_url: null
+		},
+		organization: {
+			id: 1,
+			name: 'Default',
+			role: 'admin'
+		},
+		license: null,
+		callbacks: {
+			onOrganizationSwitch: () => null
+		}
+	});
 	let nameInput: HTMLInputElement;
 
 	async function init() {
+		return;
 		loading = true;
 
 		const response = await fetch('https://hyvor.localhost/api/v2/local/bar', {