From bfb39eb7c6381bdae96b988d0b07e97bbe0f56a8 Mon Sep 17 00:00:00 2001
From: Harald Mack <harald.mack@protonmail.com>
Date: Thu, 24 Oct 2024 13:34:15 +0200
Subject: [PATCH] work on making editing of questions usable

---
 .../src/lib/components/Admin/Login.svelte     | 50 -------------------
 frontend/src/lib/components/AdminPage.svelte  |  2 +-
 .../src/lib/components/UserLandingPage.svelte | 27 ++--------
 .../lib/components/UserRegistration.svelte    |  4 +-
 frontend/src/lib/components/UserVerify.svelte | 21 ++++++++
 frontend/src/locales/de.json                  |  6 ++-
 6 files changed, 33 insertions(+), 77 deletions(-)
 delete mode 100644 frontend/src/lib/components/Admin/Login.svelte
 create mode 100644 frontend/src/lib/components/UserVerify.svelte

diff --git a/frontend/src/lib/components/Admin/Login.svelte b/frontend/src/lib/components/Admin/Login.svelte
deleted file mode 100644
index ba354354..00000000
--- a/frontend/src/lib/components/Admin/Login.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<svelte:options runes={true} />
-
-<script lang="ts">
-	import { Input, Label, Button, Card, Alert } from 'flowbite-svelte';
-	import { adminUser } from '$lib/admin.svelte';
-	import { preventDefault } from '$lib/util';
-	import type { Body_auth_cookie_login_auth_login_post } from '$lib/client/types.gen';
-	import { _ } from 'svelte-i18n';
-
-	const loginData: Body_auth_cookie_login_auth_login_post = { username: '', password: '' };
-	let errorCode = $state('');
-
-	async function doLogin() {
-		errorCode = await adminUser.login(loginData);
-	}
-</script>
-
-<Card size="lg">
-	<h5 class="mb-5 text-center text-2xl font-bold text-gray-900 dark:text-white">Admin login</h5>
-	<div class="mb-5">
-		<form onsubmit={preventDefault(doLogin)}>
-			<div class="mb-6">
-				<Label for="email" class="mb-2">Email address</Label>
-				<Input
-					type="email"
-					bind:value={loginData.username}
-					id="email"
-					placeholder="john.doe@company.com"
-					required
-					autocomplete="username"
-				/>
-			</div>
-			<div class="mb-6">
-				<Label for="password" class="mb-2">Password</Label>
-				<Input
-					type="password"
-					bind:value={loginData.password}
-					id="password"
-					placeholder="•••••••••"
-					required
-					autocomplete="current-password"
-				/>
-			</div>
-			<Button type="submit" class="mb-6">Login</Button>
-			{#if errorCode !== ''}
-				<Alert>{$_(`login.${errorCode}`)}</Alert>
-			{/if}
-		</form>
-	</div>
-</Card>
diff --git a/frontend/src/lib/components/AdminPage.svelte b/frontend/src/lib/components/AdminPage.svelte
index 8ad74272..e3810349 100644
--- a/frontend/src/lib/components/AdminPage.svelte
+++ b/frontend/src/lib/components/AdminPage.svelte
@@ -22,7 +22,7 @@
 	});
 </script>
 
-<Tabs tabStyle="pill">
+<Tabs tabStyle="underline">
 	{#if milestoneAgeGroups.value}
 		{#each milestoneAgeGroups.value as milestoneAgeGroup (milestoneAgeGroup.id)}
 			<TabItem open={milestoneAgeGroup.id === milestoneAgeGroups.value[0].id}>
diff --git a/frontend/src/lib/components/UserLandingPage.svelte b/frontend/src/lib/components/UserLandingPage.svelte
index e4a362aa..d165272a 100644
--- a/frontend/src/lib/components/UserLandingPage.svelte
+++ b/frontend/src/lib/components/UserLandingPage.svelte
@@ -1,14 +1,9 @@
 <script lang="ts">
+	import UserVerify from '$lib/components/UserVerify.svelte';
 	import { componentTable } from '$lib/stores/componentStore';
 	import { currentUser, refresh } from '$lib/stores/userStore';
 	import { Button, TabItem, Tabs } from 'flowbite-svelte';
-	import {
-		AtomOutline,
-		CheckCircleOutline,
-		CogSolid,
-		GridPlusSolid,
-		ProfileCardSolid
-	} from 'flowbite-svelte-icons';
+	import { AtomOutline, CogSolid, GridPlusSolid, ProfileCardSolid } from 'flowbite-svelte-icons';
 	import { onMount } from 'svelte';
 	import { _ } from 'svelte-i18n';
 	import { get } from 'svelte/store';
@@ -62,28 +57,14 @@
 			</Tabs>
 		</div>
 	{:else}
-		<div
-			class="m-2 mx-auto flex w-full items-center justify-center p-2 text-gray-700 dark:text-gray-400"
-		>
-			<CheckCircleOutline size="xl" color="green" class="m-2" />
-			<div class="m-2 p-2">
-				{$_('registration.successMessage')}
-			</div>
-		</div>
-		<Button
-			type="button"
-			class="dark:bg-primay-700 bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-800 w-full text-center text-sm text-white hover:text-white"
-			href="/"
-		>
-			{$_('registration.goHome')}
-		</Button>
+		<UserVerify />
 	{/if}
 {:else}
 	<div
 		class="m-2 mx-auto flex w-full items-center justify-center p-2 text-gray-700 dark:text-gray-400"
 	>
 		<div class="m-2 p-2">
-			{$_('registration.successMessage')}
+			{$_('login.notLoggedIn')}
 		</div>
 	</div>
 	<Button
diff --git a/frontend/src/lib/components/UserRegistration.svelte b/frontend/src/lib/components/UserRegistration.svelte
index 8a3952e6..f637dd95 100644
--- a/frontend/src/lib/components/UserRegistration.svelte
+++ b/frontend/src/lib/components/UserRegistration.svelte
@@ -4,10 +4,10 @@
 	import { type RegisterRegisterData } from '$lib/client/types.gen';
 	import AlertMessage from '$lib/components/AlertMessage.svelte';
 	import DataInput from '$lib/components/DataInput/DataInput.svelte';
+	import UserVerify from '$lib/components/UserVerify.svelte';
 	import { preventDefault } from '$lib/util';
 	import { Button, Card, Heading, Input, Select } from 'flowbite-svelte';
 	import { _ } from 'svelte-i18n';
-	import UserVerify from './UserVerify.svelte';
 
 	async function submitData(): Promise<void> {
 		const equalPW = data[1].value !== '' && data[2].value === data[1].value;
@@ -145,7 +145,7 @@
 
 			<Button
 				type="submit"
-				class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+				class="dark:bg-primay-700 bg-primary-700 hover:bg-primary-800 dark:hover:bg-primary-800 w-full text-center text-sm text-white hover:text-white"
 				>{$_('registration.submitButtonLabel')}</Button
 			>
 		</form>
diff --git a/frontend/src/lib/components/UserVerify.svelte b/frontend/src/lib/components/UserVerify.svelte
new file mode 100644
index 00000000..f2d02943
--- /dev/null
+++ b/frontend/src/lib/components/UserVerify.svelte
@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Button } from 'flowbite-svelte';
+	import { CheckCircleOutline } from 'flowbite-svelte-icons';
+	import { _ } from 'svelte-i18n';
+</script>
+
+<div
+	class="m-2 mx-auto flex w-full items-center justify-center p-2 text-gray-700 dark:text-gray-400"
+>
+	<CheckCircleOutline size="xl" color="green" class="m-2" />
+	<div class="m-2 p-2">
+		{$_('registration.successMessage')}
+	</div>
+</div>
+<Button
+	type="button"
+	class="dark:bg-primay-700 w-full bg-primary-700 text-center text-sm text-white hover:bg-primary-800 hover:text-white dark:hover:bg-primary-800"
+	href="/"
+>
+	{$_('registration.goHome')}
+</Button>
diff --git a/frontend/src/locales/de.json b/frontend/src/locales/de.json
index 8205807b..8504991a 100644
--- a/frontend/src/locales/de.json
+++ b/frontend/src/locales/de.json
@@ -24,7 +24,9 @@
 		"translations": "Übersetzungen",
 		"user-questions": "Benutzerfragen",
 		"question": "Frage",
+		"selectOptions": "Optionen",
 		"actions": "Aktionen",
+		"selectPlaceholder": "Erstens,Zweitens,Drittens;",
 		"add": "Hinzufügen",
 		"edit": "Bearbeiten",
 		"delete": "Löschen",
@@ -39,7 +41,8 @@
 		"image": "Bild",
 		"images": "Bilder",
 		"min-age-months": "Mindestalter in Monaten",
-		"max-age-months": "Höchstalter in Monaten"
+		"max-age-months": "Höchstalter in Monaten",
+		"editUserQuestionTitle": "Frage an Benutzer editieren"
 	},
 	"researcher": {
 		"title": "Wissenschaft"
@@ -69,6 +72,7 @@
 		"alertMessageTitle": "Fehler",
 		"badCredentials": "Ungültige E-Mail-Adresse oder ungültiges Passwort",
 		"badActiveUser": "Der Benutzer konnte nicht gefunden werden",
+		"notLoggedIn": "Bitte melden sie sich erneut an",
 		"unauthorized": "Zugang verweigert",
 		"usernameLabel": "Benutzerkennung",
 		"passwordLabel": "Passwort",