Refactor user admin settings and enhance email management functionality

seanmorley15 · Dec 12, 2024 · 0272c6b · 0272c6b
1 parent 6a00a2e
commit 0272c6b
Show file tree

Hide file tree

Showing 3 changed files with 78 additions and 24 deletions.
diff --git a/backend/server/adventures/admin.py b/backend/server/adventures/admin.py
@@ -59,9 +59,9 @@ def number_of_visits(self, obj):
 
 class CustomUserAdmin(UserAdmin):
     model = CustomUser
-    list_display = ['username', 'email', 'is_staff', 'is_active', 'image_display']
+    list_display = ['username', 'is_staff', 'is_active', 'image_display']
     readonly_fields = ('uuid',)
-    search_fields = ('username', 'email')
+    search_fields = ('username',)
     fieldsets = UserAdmin.fieldsets + (
         (None, {'fields': ('profile_pic', 'uuid', 'public_profile')}),
     )

diff --git a/frontend/src/routes/_allauth/[...path]/+server.ts b/frontend/src/routes/_allauth/[...path]/+server.ts
@@ -12,8 +12,8 @@ export async function GET(event) {
 
 /** @type {import('./$types').RequestHandler} */
 export async function POST({ url, params, request, fetch, cookies }) {
-	const searchParam = url.search ? `${url.search}&format=json` : '?format=json';
-	return handleRequest(url, params, request, fetch, cookies, searchParam, true);
+	const searchParam = url.search ? `${url.search}` : '';
+	return handleRequest(url, params, request, fetch, cookies, searchParam, false);
 }
 
 export async function PATCH({ url, params, request, fetch, cookies }) {
@@ -22,8 +22,8 @@ export async function PATCH({ url, params, request, fetch, cookies }) {
 }
 
 export async function PUT({ url, params, request, fetch, cookies }) {
-	const searchParam = url.search ? `${url.search}&format=json` : '?format=json';
-	return handleRequest(url, params, request, fetch, cookies, searchParam, true);
+	const searchParam = url.search ? `${url.search}` : '';
+	return handleRequest(url, params, request, fetch, cookies, searchParam, false);
 }
 
 export async function DELETE({ url, params, request, fetch, cookies }) {

diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
@@ -15,6 +15,8 @@
 		emails = data.props.emails;
 	}
 
+	let new_email: string = '';
+
 	onMount(async () => {
 		if (browser) {
 			const queryParams = new URLSearchParams($page.url.search);
@@ -66,6 +68,38 @@
 			addToast('error', 'Error removing email');
 		}
 	}
+
+	async function verifyEmail(email: { email: any; verified?: boolean; primary?: boolean }) {
+		let res = await fetch('/_allauth/browser/v1/account/email/', {
+			method: 'PUT',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ email: email.email })
+		});
+		if (res.ok) {
+			addToast('success', 'Email sent to verify');
+		} else {
+			addToast('error', 'Error verifying email. Try again in a few minutes.');
+		}
+	}
+
+	async function addEmail() {
+		let res = await fetch('/_allauth/browser/v1/account/email/', {
+			method: 'POST',
+			headers: {
+				'Content-Type': 'application/json'
+			},
+			body: JSON.stringify({ email: new_email })
+		});
+		if (res.ok) {
+			addToast('success', 'Email added');
+			emails = [...emails, { email: new_email, verified: false, primary: false }];
+			new_email = '';
+		} else {
+			addToast('error', 'Error adding email');
+		}
+	}
 </script>
 
 <h1 class="text-center font-extrabold text-4xl mb-6">{$t('settings.settings_page')}</h1>
@@ -177,33 +211,52 @@
 </div>
 
 <h1 class="text-center font-extrabold text-xl mt-4 mb-2">{$t('settings.email_change')}</h1>
-<div class="flex justify-center">
+
+<div class="flex justify-center mb-4">
 	<div>
 		{#each emails as email}
-			<p>
+			<p class="mb-2">
 				{email.email}
-				{email.verified ? '✅' : '❌'}
-				{email.primary ? '🔑' : ''}
-				<button class="btn btn-sm btn-warning" on:click={() => removeEmail(email)}>Remove</button>
+				{#if email.verified}
+					<div class="badge badge-success">Verified</div>
+				{:else}
+					<div class="badge badge-error">Not Verified</div>
+				{/if}
+				{#if email.primary}
+					<div class="badge badge-primary">Primary</div>
+				{/if}
+				<button class="btn btn-sm btn-warning ml-2" on:click={() => removeEmail(email)}
+					>Remove</button
+				>
+				{#if !email.verified}
+					<button class="btn btn-sm btn-secondary ml-2" on:click={() => verifyEmail(email)}
+						>Verify</button
+					>
+				{/if}
 			</p>
 		{/each}
 		{#if emails.length === 0}
 			<p>No emails</p>
 		{/if}
 	</div>
+</div>
 
-	<div>
-		<input
-			type="email"
-			name="new_email"
-			placeholder={$t('settings.new_email')}
-			id="new_email"
-			class="block mb-2 input input-bordered w-full max-w-xs"
-		/>
-	</div>
-	<div>
-		<button class="py-2 px-4 btn btn-primary mt-2">{$t('settings.email_change')}</button>
-	</div>
+<div class="flex justify-center mt-4">
+	<form class="w-full max-w-xs" on:submit={addEmail}>
+		<div class="mb-4">
+			<input
+				type="email"
+				name="new_email"
+				placeholder={$t('settings.new_email')}
+				bind:value={new_email}
+				id="new_email"
+				class="block mb-2 input input-bordered w-full max-w-xs"
+			/>
+		</div>
+		<div>
+			<button class="py-2 px-4 btn btn-primary">{$t('settings.email_change')}</button>
+		</div>
+	</form>
 </div>
 
 <div class="flex flex-col items-center mt-4">
@@ -213,10 +266,11 @@
 	<p>
 		{$t('adventures.visited_region_check_desc')}
 	</p>
+	<p>{$t('adventures.update_visited_regions_disclaimer')}</p>
+
 	<button class="btn btn-neutral mt-2 mb-2" on:click={checkVisitedRegions}
 		>{$t('adventures.update_visited_regions')}</button
 	>
-	<p>{$t('adventures.update_visited_regions_disclaimer')}</p>
 </div>
 <!-- 
 <div class="flex flex-col items-center mt-4">