From 4e543fad55387a23c657aa311c801a6e9ff81f92 Mon Sep 17 00:00:00 2001
From: Sean Morley <zipsm15@gmail.com>
Date: Mon, 17 Mar 2025 10:38:41 -0400
Subject: [PATCH] feat: Enhance City and Lodging components with region and
 country names, and improve password disable functionality

---
 backend/server/worldtravel/serializers.py     |  5 +-
 frontend/src/lib/components/CityCard.svelte   |  6 +-
 .../src/lib/components/LodgingCard.svelte     | 11 +++-
 frontend/src/lib/types.ts                     |  2 +
 frontend/src/routes/settings/+page.server.ts  | 10 ++-
 frontend/src/routes/settings/+page.svelte     | 63 ++++++++++---------
 6 files changed, 64 insertions(+), 33 deletions(-)

diff --git a/backend/server/worldtravel/serializers.py b/backend/server/worldtravel/serializers.py
index 99c7379..f8e35c9 100644
--- a/backend/server/worldtravel/serializers.py
+++ b/backend/server/worldtravel/serializers.py
@@ -43,10 +43,13 @@ class RegionSerializer(serializers.ModelSerializer):
         return City.objects.filter(region=obj).count()
 
 class CitySerializer(serializers.ModelSerializer):
+    region_name = serializers.CharField(source='region.name', read_only=True)
+    country_name = serializers.CharField(source='region.country.name', read_only=True
+    )
     class Meta:
         model = City
         fields = '__all__'
-        read_only_fields = ['id', 'name', 'region', 'longitude', 'latitude']
+        read_only_fields = ['id', 'name', 'region', 'longitude', 'latitude', 'region_name', 'country_name']
 
 class VisitedRegionSerializer(CustomModelSerializer):
     longitude = serializers.DecimalField(source='region.longitude', max_digits=9, decimal_places=6, read_only=True)
diff --git a/frontend/src/lib/components/CityCard.svelte b/frontend/src/lib/components/CityCard.svelte
index 5678af6..3273d45 100644
--- a/frontend/src/lib/components/CityCard.svelte
+++ b/frontend/src/lib/components/CityCard.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { addToast } from '$lib/toasts';
 	import type { City } from '$lib/types';
 	import { createEventDispatcher } from 'svelte';
@@ -45,7 +46,10 @@
 	<div class="card-body">
 		<h2 class="card-title overflow-ellipsis">{city.name}</h2>
 		<div class="flex flex-wrap gap-2">
-			<div class="badge badge-neutral-300">{city.id}</div>
+			<div class="badge badge-neutral-300">
+				{city.region_name}, {city.country_name}
+			</div>
+			<div class="badge badge-neutral-300">{city.region}</div>
 		</div>
 		<div class="card-actions justify-end">
 			{#if !visited}
diff --git a/frontend/src/lib/components/LodgingCard.svelte b/frontend/src/lib/components/LodgingCard.svelte
index c5d41ba..a7bd34c 100644
--- a/frontend/src/lib/components/LodgingCard.svelte
+++ b/frontend/src/lib/components/LodgingCard.svelte
@@ -6,9 +6,18 @@
 	import { addToast } from '$lib/toasts';
 	import { t } from 'svelte-i18n';
 	import DeleteWarning from './DeleteWarning.svelte';
+	import { LODGING_TYPES_ICONS } from '$lib';
 
 	const dispatch = createEventDispatcher();
 
+	function getLodgingIcon(type: string) {
+		if (type in LODGING_TYPES_ICONS) {
+			return LODGING_TYPES_ICONS[type as keyof typeof LODGING_TYPES_ICONS];
+		} else {
+			return '🏨';
+		}
+	}
+
 	export let lodging: Lodging;
 	export let user: User | null = null;
 	export let collection: Collection | null = null;
@@ -91,7 +100,7 @@
 			<h2 class="card-title text-lg font-semibold truncate">{lodging.name}</h2>
 			<div class="flex items-center gap-2">
 				<div class="badge badge-secondary">
-					{$t(`lodging.${lodging.type}`)}
+					{$t(`lodging.${lodging.type}`) + ' ' + getLodgingIcon(lodging.type)}
 				</div>
 				<!-- {#if hotel.type == 'plane' && hotel.flight_number}
 					<div class="badge badge-neutral-200">{hotel.flight_number}</div>
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index 23a9975..aeebe13 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -72,6 +72,8 @@ export type City = {
 	latitude: number | null;
 	longitude: number | null;
 	region: string;
+	region_name: string;
+	country_name: string;
 };
 
 export type VisitedRegion = {
diff --git a/frontend/src/routes/settings/+page.server.ts b/frontend/src/routes/settings/+page.server.ts
index a19a48c..0d6bd26 100644
--- a/frontend/src/routes/settings/+page.server.ts
+++ b/frontend/src/routes/settings/+page.server.ts
@@ -63,6 +63,13 @@ export const load: PageServerLoad = async (event) => {
 		immichIntegration = await immichIntegrationsFetch.json();
 	}
 
+	let socialProvidersFetch = await fetch(`${endpoint}/auth/social-providers`, {
+		headers: {
+			Cookie: `sessionid=${sessionId}`
+		}
+	});
+	let socialProviders = await socialProvidersFetch.json();
+
 	let publicUrlFetch = await fetch(`${endpoint}/public-url/`);
 	let publicUrl = '';
 	if (!publicUrlFetch.ok) {
@@ -78,7 +85,8 @@ export const load: PageServerLoad = async (event) => {
 			emails,
 			authenticators,
 			immichIntegration,
-			publicUrl
+			publicUrl,
+			socialProviders
 		}
 	};
 };
diff --git a/frontend/src/routes/settings/+page.svelte b/frontend/src/routes/settings/+page.svelte
index 349aca6..1ca20db 100644
--- a/frontend/src/routes/settings/+page.svelte
+++ b/frontend/src/routes/settings/+page.svelte
@@ -100,6 +100,7 @@
 				addToast('success', $t('settings.password_disabled'));
 			} else {
 				addToast('error', $t('settings.password_disabled_error'));
+				user.disable_password = false;
 			}
 		} else {
 			let res = await fetch('/auth/disable-password/', {
@@ -112,6 +113,7 @@
 				addToast('success', $t('settings.password_enabled'));
 			} else {
 				addToast('error', $t('settings.password_enabled_error'));
+				user.disable_password = true;
 			}
 		}
 	}
@@ -520,37 +522,40 @@
 				target="_blank">{$t('settings.launch_account_connections')}</a
 			>
 
-			<div class="mt-8">
-				<h2 class="text-2xl font-semibold text-center">{$t('settings.password_disable')}</h2>
-				<p>{$t('settings.password_disable_desc')}</p>
+			{#if data.props.socialProviders && data.props.socialProviders.length > 0}
+				<div class="mt-8">
+					<h2 class="text-2xl font-semibold text-center">{$t('settings.password_disable')}</h2>
+					<p>{$t('settings.password_disable_desc')}</p>
 
-				<div class="flex flex-col items-center mt-4">
-					<input
-						type="checkbox"
-						id="disable_password"
-						name="disable_password"
-						bind:checked={user.disable_password}
-						class="checkbox checkbox-primary"
-					/>
-					<label for="disable_password" class="ml-2 text-sm text-neutral-content"
-						>{$t('settings.disable_password')}</label
-					>
-					<button class="btn btn-primary mt-4" on:click={disablePassword}
-						>{$t('settings.update')}</button
-					>
-					{#if user.disable_password}
-						<div class="badge badge-error mt-2">{$t('settings.password_disabled')}</div>
-					{/if}
-					{#if !user.disable_password}
-						<div class="badge badge-success mt-2">{$t('settings.password_enabled')}</div>
-					{/if}
-					{#if user.disable_password}
-						<div class="alert alert-warning mt-4">
-							{$t('settings.password_disable_warning')}
-						</div>
-					{/if}
+					<div class="flex flex-col items-center mt-4">
+						<input
+							type="checkbox"
+							id="disable_password"
+							name="disable_password"
+							bind:checked={user.disable_password}
+							class="toggle toggle-primary"
+							on:change={disablePassword}
+						/>
+						<label for="disable_password" class="ml-2 text-sm text-neutral-content"
+							>{$t('settings.disable_password')}</label
+						>
+						<!-- <button class="btn btn-primary mt-4" on:click={disablePassword}
+							>{$t('settings.update')}</button
+						> -->
+						{#if user.disable_password}
+							<div class="badge badge-error mt-2">{$t('settings.password_disabled')}</div>
+						{/if}
+						{#if !user.disable_password}
+							<div class="badge badge-success mt-2">{$t('settings.password_enabled')}</div>
+						{/if}
+						{#if user.disable_password}
+							<div class="alert alert-warning mt-4">
+								{$t('settings.password_disable_warning')}
+							</div>
+						{/if}
+					</div>
 				</div>
-			</div>
+			{/if}
 		</div>
 	</section>