refactor: use objects for properties

I was reading warnings during the execution of tests and fixed them for
ImportProject templates and pages.

Signed-off-by: André Jaenisch <andre.jaenisch@posteo.de>

src/lib/components/pages/ImportProject.svelte

@@ -17,7 +17,7 @@ You should have received a copy of the GNU Affero General Public License along w
 	/**
 	 * Data populated by SvelteKit
 	 */
-	export let data = null;
+	export let data = {};
 </script>
 
 <ImportProjectTemplate {data} />

src/lib/components/templates/ImportProject.svelte

@@ -18,7 +18,45 @@ You should have received a copy of the GNU Affero General Public License along w
 	/**
 	 * Required context for populating the template.
 	 */
-	export const data = null;
+	export let data = {};
+
+	/**
+	 * Translation keys.
+	 */
+	const i18n = {
+		form: {
+			avatar: 'page.import_project.form.avatar',
+			components: 'page.import_project.form.components',
+			fields: {
+				avatar: {
+					label: 'page.import_project.form.fields.avatar.label'
+				},
+				description: {
+					label: 'page.import_project.form.fields.description.label',
+					placeholder: 'page.import_project.form.fields.description.placeholder'
+				},
+				issues: {
+					label: 'page.import_project.form.fields.issues.label'
+				},
+				name: {
+					error: 'page.import_project.form.fields.name.error',
+					label: 'page.import_project.form.fields.name.label',
+					placeholder: 'page.import_project.form.fields.name.placeholder'
+				},
+				pr: {
+					label: 'page.import_project.form.fields.pr.label'
+				},
+				repository: {
+					hint: 'page.import_project.form.fields.repository.hint',
+					label: 'page.import_project.form.fields.repository.label',
+					placeholder: 'page.import_project.form.fields.repository.placeholder'
+				}
+			},
+			submit: 'page.import_project.form.submit'
+		},
+		heading: 'page.import_project.heading',
+		intro: 'page.import_project.intro'
+	};
 </script>
 
 <section class="w-full">
@@ -26,12 +64,12 @@ You should have received a copy of the GNU Affero General Public License along w
 		class="w-96 flex flex-col gap-6 mx-auto px-8 py-8 bg-surface-100 border border-surface-300"
 		name="import-project"
 	>
-		<h2 class="h2 text-surface-500">{$_('page.import_project.heading')}</h2>
+		<h2 class="h2 text-surface-500">{$_(i18n.heading)}</h2>
-		<p class="text-surface-500">{$_('page.import_project.intro')}</p>
+		<p class="text-surface-500">{$_(i18n.intro)}</p>
 		<div class="flex flex-col gap-1">
 			<h3 class="text-surface-500">
 				<label class="label" for="project-name">
-					{$_('page.import_project.form.fields.name.label')}
+					{$_(i18n.form.fields.name.label)}
 					<span class="required">*</span>
 				</label>
 			</h3>
@@ -40,11 +78,11 @@ You should have received a copy of the GNU Affero General Public License along w
 				name="project-name"
 				class="input input-error"
 				type="text"
-				placeholder={$_('page.import_project.form.fields.name.placeholder')}
+				placeholder={$_(i18n.form.fields.name.placeholder)}
 			/>
 			<div class="flex gap-2 items-center text-error-500">
 				<AlertFill16 fill="currentColor" />
-				{$_('page.import_project.form.fields.name.error')}
+				{$_(i18n.form.fields.name.error)}
 			</div>
 			<div class="text-surface-400">
 				domain.example/projects/<span class="text-surface-500">NameUpdateRealtime</span>
@@ -54,19 +92,19 @@ You should have received a copy of the GNU Affero General Public License along w
 		<div>
 			<h3 class="text-surface-500">
 				<label class="label" for="project-description">
-					{$_('page.import_project.form.fields.description.label')}
+					{$_(i18n.form.fields.description.label)}
 				</label>
 			</h3>
 			<textarea
 				id="project-description"
 				name="project-description"
 				class="textarea"
-				placeholder={$_('page.import_project.form.fields.description.placeholder')}
+				placeholder={$_(i18n.form.fields.description.placeholder)}
 			/>
 		</div>
 
 		<div>
-			<h3 class="text-surface-500">{$_('page.import_project.form.avatar')}</h3>
+			<h3 class="text-surface-500">{$_(i18n.form.avatar)}</h3>
 			<div class="flex">
 				<span class="bg-surface-300 flex justify-center items-center h-12 w-12">
 					<Repo24 class="h-6 w-6" />
@@ -76,7 +114,7 @@ You should have received a copy of the GNU Affero General Public License along w
 					class="h-12 flex flex-1 gap-2 items-center justify-center px-4 bg-surface-025 text-surface-400"
 				>
 					<Upload16 fill="currentColor" />
-					{$_('page.import_project.form.fields.avatar.label')}
+					{$_(i18n.form.fields.avatar.label)}
 				</label>
 				<input
 					id="project-avatar"
@@ -90,7 +128,7 @@ You should have received a copy of the GNU Affero General Public License along w
 
 		<div class="flex flex-col gap-2">
 			<h3 class="text-surface-500">
-				{$_('page.import_project.form.components')}
+				{$_(i18n.form.components)}
 			</h3>
 			<div>
 				<input
@@ -100,33 +138,33 @@ You should have received a copy of the GNU Affero General Public License along w
 					type="checkbox"
 				/>
 				<label for="project-repository" class="label inline text-surface-500">
-					{$_('page.import_project.form.fields.repository.label')}
+					{$_(i18n.form.fields.repository.label)}
 				</label>
 				<input
 					type="url"
 					class="input ms-8 w-auto"
-					placeholder={$_('page.import_project.form.fields.repository.placeholder')}
+					placeholder={$_(i18n.form.fields.repository.placeholder)}
 				/>
 				<div class="flex gap-1 items-center ms-8 text-warning-700">
 					<Info16 fill="currentColor" />
-					{$_('page.import_project.form.fields.repository.hint')}
+					{$_(i18n.form.fields.repository.hint)}
 				</div>
 			</div>
 			<div>
 				<input id="project-issues" name="project-issues" class="input h-6 w-6" type="checkbox" />
 				<label for="project-issues" class="label inline text-surface-500">
-					{$_('page.import_project.form.fields.issues.label')}
+					{$_(i18n.form.fields.issues.label)}
 				</label>
 			</div>
 			<div>
 				<input id="project-pr" name="project-pr" class="input h-6 w-6" type="checkbox" />
 				<label for="project-pr" class="label inline text-surface-500">
-					{$_('page.import_project.form.fields.pr.label')}
+					{$_(i18n.form.fields.pr.label)}
 				</label>
 			</div>
 		</div>
 		<button type="submit" class="button bg-success-600 text-white h-12">
-			{$_('page.import_project.form.submit')}
+			{$_(i18n.form.submit)}
 		</button>
 	</form>
 </section>