Various improvements to templates

components/BlockRenderer.vue

@@ -189,20 +189,16 @@ const createModalOpen = ref(false);
 												:defaults="
 													importedMeta.defaults
 												"
+												:names="importedMeta.names ?? {}"
 												@edit-slot="(slots: Block['slots']) => _block.slots = slots" />
 										</div>
 									</div>
 									<div
-										class="flex flex-shrink-0 justify-end px-4 py-4 gap-3">
-										<Button
-											theme="gray"
-											type="button"
-											@click="open = false">
-											Cancel
-										</Button>
+										class="flex px-4 py-4 gap-3">
 										<Button
 											theme="orange"
 											type="submit"
+											class="w-full"
 											@click="saveAll">
 											Save
 										</Button>

components/SlotEditorRenderer.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
 	importedMeta: TemplateMetadata["inputs"];
 	defaults: TemplateMetadata["defaults"];
 	slots: Block["slots"];
+	names: TemplateMetadata["names"];
 }>();
 
 const emit = defineEmits(["editSlot"]);
@@ -74,6 +75,17 @@ const clickFileInput = () => {
 	// I have no idea why it needs the [0]
 	(fileInput.value as any)[0].click();
 };
+
+const getDisplayName = (name: string) => {
+	return props.names[name] ?? name;
+}
+
+const decomposeLink = (value?: string) => {
+	if (!value) return ["", ""];
+	// If there is more than 1 pipe, it's not a valid link
+	if (value.split("|").length > 2) return ["", ""];
+	return value.split("|");
+}
 </script>
 
 <template>
@@ -82,7 +94,7 @@ const clickFileInput = () => {
 			<label
 				for="project-name"
 				class="block text-sm font-medium text-gray-900">
-				{{ name }}
+				{{ getDisplayName(name) }}
 			</label>
 			<div class="mt-1">
 				<InputCMInput
@@ -100,12 +112,70 @@ const clickFileInput = () => {
 			</div>
 		</template>
 
+		<template v-if="inputType === InputType.Url">
+			<label
+				for="project-name"
+				class="block text-sm font-medium text-gray-900">
+				{{ getDisplayName(name) }}
+			</label>
+			<div class="mt-1">
+				<InputCMInput
+					id="project-name"
+					:value="slots[name]"
+					type="text"
+					icon="tabler:link"
+					placeholder="URL address"
+					name="project-name"
+					class="!ring-orange-500 focus:!border-orange-500"
+					@input="
+						emit('editSlot', {
+							...slots,
+							[name]: ($event as any).target.value,
+						})
+						" />
+			</div>
+		</template>
+
+		<template v-if="inputType === InputType.Link">
+			<label
+				for="project-name"
+				class="block text-sm font-medium text-gray-900">
+				{{ getDisplayName(name) }}
+			</label>
+			<div class="mt-1">
+				<InputCMInput
+					id="project-name"
+					:value="decomposeLink(slots[name])[0]"
+					type="text"
+					name="project-name"
+					placeholder="Link text"
+					icon="tabler:cursor-text"
+					@input="emit('editSlot', {
+						...slots,
+						[name]: ($event as any).target.value.replace('|', '') + '|' + decomposeLink(slots[name])[1],
+					})"
+					class="!ring-orange-500 focus:!border-orange-500"/>
+				<InputCMInput
+					id="project-name"
+					:value="decomposeLink(slots[name])[1]"
+					type="text"
+					name="project-name"
+					icon="tabler:link"
+					placeholder="Link URL"
+					class="!ring-orange-500 focus:!border-orange-500 mt-1"
+					@input="emit('editSlot', {
+						...slots,
+						[name]: decomposeLink(slots[name])[0] + '|' + ($event as any).target.value.replace('|', ''),
+					})" />
+			</div>
+		</template>
+
 
 		<template v-if="inputType === InputType.Image">
 				<label
 					for="project-name"
 					class="block text-sm font-medium text-gray-900">
-					{{ name }}
+					{{ getDisplayName(name) }}
 				</label>
 				<div
 					class="mt-1 ring-1 ring-gray-200 flex items-center justify-center gap-x-3 relative h-15 w-15 rounded overflow-hidden group">
@@ -148,7 +218,7 @@ const clickFileInput = () => {
 			<label
 				for="project-name"
 				class="block text-sm font-medium text-gray-900">
-				{{ name }}
+				{{ getDisplayName(name) }}
 			</label>
 			<div class="mt-1">
 				<textarea
@@ -171,7 +241,7 @@ const clickFileInput = () => {
 			<label
 				for="project-name"
 				class="block text-sm font-medium text-gray-900">
-				{{ name }}
+				{{ getDisplayName(name) }}
 			</label>
 			<div class="mt-1">
 				<input
@@ -195,7 +265,7 @@ const clickFileInput = () => {
 				@click="expanded = !expanded"
 				for="project-name"
 				class="block text-sm font-medium text-gray-900">
-				{{ name }}
+				{{ getDisplayName(name) }}
 				<Icon
 					:name="
 						expanded
@@ -214,6 +284,7 @@ const clickFileInput = () => {
 					class="mt-2 flex flex-col gap-1">
 					<SlotEditorRenderer
 						:slots="element"
+						:names="names"
 						:imported-meta="importedMeta[name][0]"
 						:defaults="defaults[name][0]"
 						@edit-slot="(newSlots: Block['slots']) => emit('editSlot', {

pages/account/index.vue

@@ -45,14 +45,13 @@ const save = (e: Event) => {
 		});
 };
 
-const oidc = (useFetch<Config["oidc_providers"]>("/api/internal/oidc-config")).data;
+const oidc = (await useFetch("/api/config/oidc")).data;
 
 const linkOIDC = async (oidcProvider: Config["oidc_providers"][0]) => {
 	const userManager = new UserManager({
 		authority: oidcProvider.authority,
 		client_id: oidcProvider.client_id,
 		redirect_uri: `${useRequestURL().origin}/auth/callback`,
-		response_type: "code",
 		scope: oidcProvider.scopes.join(" "),
 	});
 

pages/auth/callback/[provider].vue

@@ -3,22 +3,17 @@ import { UserManager } from 'oidc-client-ts';
 import { Config } from '~/types/config';
 
 
-const oidc = (await useFetch<Config["oidc_providers"]>("/api/internal/oidc-config")).data;
+const oidc = (await useFetch("/api/config/oidc")).data;
 
 onMounted(() => {
 	const oidcProvider = oidc.value?.find(o => o.id === useRoute().params.provider);
 
-	console.log(useRoute().params.provider);
-	console.log(oidc);
-	console.log(oidcProvider);
-
 	if (!oidcProvider) return false;
 
 	const userManager = new UserManager({
 		authority: oidcProvider.authority,
 		client_id: oidcProvider.client_id,
 		redirect_uri: `${useRequestURL().origin}/auth/callback`,
-		response_type: "code",
 		scope: oidcProvider.scopes.join(" "),
 	});
 

pages/auth/login.vue

@@ -91,16 +91,14 @@ onMounted(async () => {
 	loading.value = false;
 });
 
-const oidc = (useFetch<Config["oidc_providers"]>("/api/internal/oidc-config")).data;
-
+const oidc = (await useFetch("/api/config/oidc")).data;
 
 const oidcSignIn = async (oidcProvider: Config["oidc_providers"][0]) => {
 	loading.value = true;
 	const userManager = new UserManager({
 		authority: oidcProvider.authority,
 		client_id: oidcProvider.client_id,
 		redirect_uri: `${useRequestURL().origin}/auth/callback/${oidcProvider.id}/`,
-		response_type: "code",
 		scope: oidcProvider.scopes.join(" "),
 	});
 

server/api/auth/login-openid.post.ts

@@ -14,8 +14,6 @@ export default defineEventHandler(async event => {
 		provider: string;
 	}>(event);
 
-	console.log(oidc);
-
 	const provider = oidc.find(o => o.id === body.provider);
 	if (!provider) throw createError("Invalid OIDC provider!");
 

templates/carousels/GradientCarousel.json

@@ -2,7 +2,7 @@
 	"category": "carousels",
 	"name": "GradientCarousel",
 	"displayName": "Card Grid",
-	"description": "Grid of cards with an avatars",
+	"description": "Grid of cards with an avatar",
 	"inputs": {
 		"list": [
 			{
@@ -31,5 +31,13 @@
 				"text": ""
 			}
 		]
+	},
+	"names": {
+		"list": "Cards",
+		"id": "ID",
+		"name": "Header",
+		"profession": "Subtext",
+		"avatar": "Avatar",
+		"text": "Text"
 	}
 }

templates/dropdowns/DropdownList.json

@@ -32,5 +32,12 @@
 				"answer": ""
 			}
 		]
+	},
+	"names": {
+		"text-header": "Header",
+		"list": "List",
+		"id": "ID",
+		"question": "Dropdown Title",
+		"answer": "Dropdown Content"
 	}
 }

templates/featuresets/ImagesWithText.json

@@ -10,9 +10,8 @@
 				"id": "string",
 				"title": "string",
 				"desc": "paragraph",
-				"image": "string",
-				"linkHref": "string",
-				"linkText": "string"
+				"image": "image",
+				"link": "link"
 			}
 		]
 	},
@@ -24,17 +23,24 @@
 				"title": "",
 				"desc": "string",
 				"image": "",
-				"linkHref": "",
-				"linkText": ""
+				"link": ""
 			},
 			{
 				"id": "#ID#",
 				"title": "",
 				"desc": "string",
 				"image": "",
-				"linkHref": "",
-				"linkText": ""
+				"link": ""
 			}
 		]
+	},
+	"names": {
+		"text-header": "Text Header",
+		"list": "List",
+		"id": "ID",
+		"title": "Title",
+		"desc": "Description",
+		"image": "Image",
+		"link": "Link"
 	}
 }

templates/featuresets/ImagesWithText.vue

@@ -10,8 +10,7 @@ defineProps<{
 		title: string;
 		desc: string;
 		image: string;
-		linkText: string;
-		linkHref: string;
+		link: string;
 	}[];
 }>();
 </script>
@@ -44,13 +43,13 @@ defineProps<{
 					</p>
 
 					<a
-						v-if="element.linkText"
+						v-if="element.link"
 						class="text-lg text-blue-600 font-inter"
-						:href="element.linkHref"
+						:href="element.link.split('|')[1]"
 						target="_blank"
 						data-placeholder="Link text"
 						rel="noreferrer">
-						{{ element.linkText }}
+						{{ element.link.split("|")[0] }}
 						<Icon
 							name="tabler:external-link"
 							class="inline mb-1 w-5 h-5" />

templates/grids/CardGridWithTags.json

@@ -18,7 +18,7 @@
 				],
 				"description": "paragraph",
 				"name": "string",
-				"href": "string"
+				"href": "url"
 			}
 		]
 	},
@@ -37,8 +37,18 @@
 				],
 				"description": "",
 				"name": "",
-				"href": "#"
+				"href": ""
 			}
 		]
+	},
+	"names": {
+		"text-header": "Header",
+		"grid": "Grid",
+		"tags": "Tags",
+		"name": "Name",
+		"href": "Link",
+		"description": "Description",
+		"color": "Color",
+		"text-color": "Text Color"
 	}
 }