🔀 Merged ClassQuizController

frontend/src/routes/account/login/password_component.svelte

@@ -5,7 +5,6 @@
   -->
 <script lang="ts">
 	import { getLocalization } from '$lib/i18n';
-	import { alertModal } from '../../../lib/stores';
 
 	export let session_data;
 	export let selected_method;
@@ -37,19 +36,16 @@
 			try {
 				data = await res.json();
 			} catch {
-				alertModal.set({
-					open: true,
-					body: "This shouldn't happen. Please try again.",
-					title: 'Unknown error'
-				});
+				alert("This shouldn't happen");
 				window.location.reload();
 			}
 			if (data.detail === 'wrong credentials') {
-				alertModal.set({
+				/*				alertModal.set({
 					open: true,
 					body: 'Please try again. Your email and or password were incorrect.',
 					title: 'Wrong Credentials'
-				});
+				});*/
+				alert('Wrong credentials');
 			}
 		}
 	};

frontend/src/routes/account/login/totp_component.svelte

@@ -5,7 +5,7 @@
   -->
 <script lang="ts">
 	import { getLocalization } from '$lib/i18n';
-	import { alertModal } from '$lib/stores';
+	// import { alertModal } from '$lib/stores';
 
 	export let session_data;
 	export let selected_method;
@@ -44,19 +44,21 @@
 			try {
 				data = await res.json();
 			} catch {
-				alertModal.set({
+				/*				alertModal.set({
 					open: true,
 					body: "This shouldn't happen. Please try again.",
 					title: 'Unknown error'
-				});
+				});*/
+				alert('Unknown error');
 				window.location.reload();
 			}
 			if (data.detail === 'totp wrong') {
-				alertModal.set({
+				/*				alertModal.set({
 					open: true,
 					body: 'Wrong Totp-Code. please try again.',
 					title: 'Totp Error'
-				});
+				});*/
+				alert('TOTP code was incorrect');
 				totp = '';
 			}
 		}

frontend/src/routes/account/login/webauthn_component.svelte

@@ -6,7 +6,7 @@
 <script lang="ts">
 	import { startAuthentication } from '@simplewebauthn/browser';
 	import { getLocalization } from '$lib/i18n';
-	import { alertModal } from '$lib/stores';
+	// import { alertModal } from '$lib/stores';
 
 	const { t } = getLocalization();
 	export let session_data;
@@ -24,11 +24,12 @@
 			asseResp = await startAuthentication(data);
 		} catch (e) {
 			console.error(e);
-			alertModal.set({
+			/*			alertModal.set({
 				open: true,
 				body: e,
 				title: 'Unknown error'
-			});
+			});*/
+			alert('Unknown error');
 			isLoading = false;
 		}
 		const res = await fetch(
@@ -51,19 +52,21 @@
 			try {
 				data = await res.json();
 			} catch {
-				alertModal.set({
+				/*				alertModal.set({
 					open: true,
 					body: "This shouldn't happen. Please try again.",
 					title: 'Unknown error'
-				});
+				});*/
+				alert('Unknown error');
 				window.location.reload();
 			}
 			if (data.detail === 'webauthn failed') {
-				alertModal.set({
+				/*				alertModal.set({
 					open: true,
 					body: 'Webauthn failed. Please try again.',
 					title: 'Webauthn Error'
-				});
+				});*/
+				alert('Webauthn failed');
 			}
 		}
 		isLoading = false;

frontend/src/routes/account/settings/+page.svelte

@@ -170,7 +170,9 @@
 				alt="Profile image of {user.username}"
 			/>
 			<div class="m-2 flex justify-center">
-				<BrownButton href="/account/settings/avatar">Change avatar</BrownButton>
+				<BrownButton href="/account/settings/avatar"
+					>{$t('settings_page.change_avatar')}</BrownButton
+				>
 			</div>
 		</div>
 		<div class="grid grid-rows-2 col-start-2 col-end-7">
@@ -184,7 +186,7 @@
 				<div class="p-4 flex justify-center">
 					<div class="m-auto">
 						<BrownButton href="/account/settings/security"
-							>Security-Settings
+							>{$t('settings_page.security_settings')}
 						</BrownButton>
 						<BrownButton href="/account/controllers">ClassQuizController</BrownButton>
 					</div>
@@ -220,20 +222,25 @@
 					</div>
 				</form>
 				<div>
-					<button on:click={add_api_key}>Add API-Key</button>
+					<div class="w-fit">
+						<BrownButton on:click={add_api_key}
+							>{$t('settings_page.add_api_key')}</BrownButton
+						>
+					</div>
 					{#await api_keys}
 						<Spinner />
 					{:then keys}
 						{#each keys as key}
 							<div>
 								{key.key}
-								<button
-									on:click={() => {
-										delete_api_key(key.key);
-									}}
-									class="admin-button"
-									>Delete
-								</button>
+								<div class="inline-block">
+									<BrownButton
+										on:click={() => {
+											delete_api_key(key.key);
+										}}
+										>{$t('words.delete')}
+									</BrownButton>
+								</div>
 							</div>
 						{/each}
 					{/await}

frontend/src/routes/account/settings/avatar/+page.svelte

@@ -94,7 +94,7 @@
 						on:click={() => {
 							index = index - 1;
 						}}
-						disabled={index < 1}>Back</BrownButton
+						disabled={index < 1}>{$t('words.back')}</BrownButton
 					>
 				</div>
 				<div class="mx-auto">
@@ -103,7 +103,7 @@
 					</h2>
 				</div>
 				<div class="ml-auto">
-					<BrownButton disabled={index < 11}>Finish</BrownButton>
+					<BrownButton disabled={index < 11}>{$t('words.finish')}</BrownButton>
 				</div>
 			</div>
 			<div class="grid grid-cols-4">
@@ -167,11 +167,11 @@
 					<Spinner my_20={false} />
 				{/if}
 			</BrownButton>
-			<BrownButton href="/account/settings">Go back</BrownButton>
+			<BrownButton href="/account/settings">{$t('avatar_settings.go_back')}</BrownButton>
 			<BrownButton
 				on:click={() => {
 					finished = false;
-				}}>Close</BrownButton
+				}}>{$t('words.close')}</BrownButton
 			>
 		</div>
 	</div>

frontend/src/routes/account/settings/security/+page.svelte

@@ -10,6 +10,9 @@
 	import TotpSetup from './totp_setup.svelte';
 	import BackupCodes from './backup_codes.svelte';
 	import BrownButton from '$lib/components/buttons/brown.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	let user_data: object | undefined;
 	let security_keys: Array<{ id: number }> | undefined;
@@ -101,15 +104,17 @@
 	<div class="grid grid-rows-2 h-screen">
 		<div class="grid grid-cols-2 h-full border-b-2 border-black">
 			<div class="h-full w-full border-r-2 border-black">
-				<h2 class="text-center text-2xl">Backup-Code</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.backup_code')}</h2>
 				<div class="flex h-full w-full justify-center">
 					<div class="m-auto">
-						<BrownButton on:click={get_backup_code}>Get Backup-Codes</BrownButton>
+						<BrownButton on:click={get_backup_code}
+							>{$t('security_settings.get_backup_code')}</BrownButton
+						>
 					</div>
 				</div>
 			</div>
 			<div class="h-full w-full">
-				<h2 class="text-center text-2xl">Activate 2 Factor</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.activate_2fa')}</h2>
 				<div class="flex h-full w-full justify-center flex-col">
 					<div class="m-auto">
 						{#if user_data.require_password}
@@ -130,7 +135,7 @@
 									/>
 								</button>
 								<span class="text-sm font-medium text-gray-700 dark:text-white"
-									>Two Factor authentication is activated</span
+									>{$t('security_settings.2fa_activated')}</span
 								>
 							</div>
 						{:else}
@@ -151,7 +156,7 @@
 									/>
 								</button>
 								<span class="text-sm font-medium text-gray-700 dark:text-white"
-									>Two Factor authentication is deactivated</span
+									>{$t('security_settings.2fa_deactivated')}</span
 								>
 							</div>
 						{/if}
@@ -161,17 +166,19 @@
 		</div>
 		<div class="grid grid-cols-2 h-full">
 			<div class="h-full w-full flex flex-col border-r-2 border-black">
-				<h2 class="text-center text-2xl">Webauthn</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.webauthn')}</h2>
 				<div class="flex justify-center">
 					{#if security_keys.length > 0}
-						<p>Webauthn is available</p>
+						<p>{$t('security_settings.webauthn_available')}</p>
 					{:else}
-						<p>Webauthn is not available</p>
+						<p>{$t('security_settings.webauthn_unavailable')}</p>
 					{/if}
 				</div>
 				<div class="flex justify-center">
 					<div class="m-auto">
-						<BrownButton on:click={add_security_key}>Add Security-Key</BrownButton>
+						<BrownButton on:click={add_security_key}
+							>{$t('security_settings.add_security_key')}</BrownButton
+						>
 					</div>
 				</div>
 				<div class="flex justify-center">
@@ -190,21 +197,25 @@
 				</div>
 			</div>
 			<div class="h-full w-full flex flex-col">
-				<h2 class="text-center text-2xl">Totp</h2>
+				<h2 class="text-center text-2xl">{$t('security_settings.totp')}</h2>
 				<div class="flex justify-center">
 					{#if totp_activated}
-						<p>Totp is available</p>
+						<p>{$t('security_settings.totp_available')}</p>
 					{:else}
-						<p>Totp is not available</p>
+						<p>{$t('security_settings.totp_unavailable')}</p>
 					{/if}
 				</div>
 
 				<div class="flex justify-center">
 					<div class="m-auto">
 						{#if totp_activated}
-							<BrownButton on:click={disable_totp}>Disable Totp</BrownButton>
+							<BrownButton on:click={disable_totp}
+								>{$t('security_settings.disable_totp')}</BrownButton
+							>
 						{:else}
-							<BrownButton on:click={enable_totp}>Enable Totp</BrownButton>
+							<BrownButton on:click={enable_totp}
+								>{$t('security_settings.enable_totp')}</BrownButton
+							>
 						{/if}
 					</div>
 				</div>

frontend/src/routes/account/settings/security/backup_codes.svelte

@@ -4,6 +4,9 @@
   - file, You can obtain one at https://mozilla.org/MPL/2.0/.
   -->
 <script lang="ts">
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 	export let backup_code;
 
 	let already_downloaded = false;
@@ -30,12 +33,12 @@
 			on:click={() => {
 				backup_code = undefined;
 			}}
-			>Close
+			>{$t('words.close')}
 		</button>
 		<div
 			class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full flex flex-col"
 		>
-			<h2 class="text-3xl m-auto">Your Backup-Code</h2>
+			<h2 class="text-3xl m-auto">{$t('security_settings.backup_codes.your_backup_code')}</h2>
 			<p
 				class="select-all font-mono text-xl m-auto"
 				on:click={() => {
@@ -44,13 +47,14 @@
 			>
 				{backup_code}
 			</p>
-			<p class="m-auto">Save this somewhere safe!</p>
+			<p class="m-auto">{$t('security_settings.backup_codes.save_somewhere_save')}</p>
 			<button
 				on:click={() => {
 					download_code(true);
 				}}
-				class="m-auto p-2 bg-[#B07156] rounded-lg">Download code</button
-			>
+				class="m-auto p-2 bg-[#B07156] rounded-lg"
+				>{$t('security_settings.backup_codes.download_code')}
+			</button>
 		</div>
 	</div>
 </div>

frontend/src/routes/account/settings/security/totp_setup.svelte

@@ -6,6 +6,9 @@
 <script lang="ts">
 	import QRCode from 'qrcode';
 	import Spinner from '$lib/Spinner.svelte';
+	import { getLocalization } from '$lib/i18n';
+
+	const { t } = getLocalization();
 
 	export let totp_data: { url: string; secret: string } | undefined;
 
@@ -21,23 +24,25 @@
 			on:click={() => {
 				totp_data = undefined;
 			}}
-			>Close
+			>{$t('words.close')}
 		</button>
 		<div class="bg-white dark:bg-gray-700 rounded-b-lg rounded-tr-lg w-full h-full">
 			<div class="grid grid-cols-3 w-full h-full">
 				<div class="flex flex-col justify-center w-full h-5/6">
 					<span class="m-auto" />
 					<div class="h-5/6 flex">
-						<p class="my-auto ml-auto">Scan this to set up the code</p>
+						<p class="my-auto ml-auto">
+							{$t('security_settings.totp_setup.scan_to_set_up')}
+						</p>
 					</div>
 					<div class="flex">
 						<p class="my-auto ml-auto">
-							Enter this as the secret if you can't scan the code
+							{$t('security_settings.totp_setup.enter_as_secret_if_no_see_code')}
 						</p>
 					</div>
 				</div>
 				<div class="flex flex-col justify-start w-full h-5/6">
-					<h2 class="text-2xl m-auto">Totp-Setup</h2>
+					<h2 class="text-2xl m-auto">{$t('security_settings.totp_setup.totp_setup')}</h2>
 					{#await get_image_url()}
 						<Spinner my_20={false} />
 					{:then data}
@@ -52,7 +57,9 @@
 					<p class="m-auto select-all font-mono">{totp_data.secret}</p>
 				</div>
 				<div class="flex justify-center h-5/6 w-full">
-					<p class="m-auto text-3xl p-4">Do not forget to save your recovery-code!</p>
+					<p class="m-auto text-3xl p-4">
+						{$t('security_settings.totp_setup.do_not_forget_backup_code')}
+					</p>
 				</div>
 			</div>
 		</div>