feat(web): email notification preference settings (#9934)

* feat(web): email notification preference settings

* Update

* remove failed api generation file

* fix handle album invite return value

* Update web/src/lib/components/user-settings-page/notifications-settings.svelte

Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>

* wording

* test

---------

Co-authored-by: Daniel Dietzler <mail@ddietzler.dev>
Co-authored-by: Daniel Dietzler <36593685+danieldietzler@users.noreply.github.com>
This commit is contained in:
Alex 2024-06-03 16:00:20 -05:00 committed by GitHub
parent 15474e81b2
commit b3ee394fdc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
15 changed files with 478 additions and 4 deletions

View file

@ -0,0 +1,75 @@
<script lang="ts">
import {
notificationController,
NotificationType,
} from '$lib/components/shared-components/notification/notification';
import { updateMyPreferences } from '@immich/sdk';
import { fade } from 'svelte/transition';
import { handleError } from '../../utils/handle-error';
import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
import { preferences } from '$lib/stores/user.store';
import Button from '../elements/buttons/button.svelte';
let emailNotificationsEnabled = $preferences?.emailNotifications?.enabled ?? true;
let albumInviteNotificationEnabled = $preferences?.emailNotifications?.albumInvite ?? true;
let albumUpdateNotificationEnabled = $preferences?.emailNotifications?.albumUpdate ?? true;
const handleSave = async () => {
try {
const data = await updateMyPreferences({
userPreferencesUpdateDto: {
emailNotifications: {
enabled: emailNotificationsEnabled,
albumInvite: emailNotificationsEnabled && albumInviteNotificationEnabled,
albumUpdate: emailNotificationsEnabled && albumUpdateNotificationEnabled,
},
},
});
$preferences.emailNotifications.enabled = data.emailNotifications.enabled;
$preferences.emailNotifications.albumInvite = data.emailNotifications.albumInvite;
$preferences.emailNotifications.albumUpdate = data.emailNotifications.albumUpdate;
notificationController.show({ message: 'Saved settings', type: NotificationType.Info });
} catch (error) {
handleError(error, 'Unable to update settings');
}
};
</script>
<section class="my-4">
<div in:fade={{ duration: 500 }}>
<form autocomplete="off" on:submit|preventDefault>
<div class="ml-4 mt-4 flex flex-col gap-4">
<div class="ml-4">
<SettingSwitch
title="Enable"
subtitle="Toggle email notifications"
bind:checked={emailNotificationsEnabled}
/>
</div>
<div class="ml-4">
<SettingSwitch
title="Album Added"
subtitle="Receive an email notification when you are added to a shared album"
bind:checked={albumInviteNotificationEnabled}
disabled={!emailNotificationsEnabled}
/>
</div>
<div class="ml-4">
<SettingSwitch
title="Album Updated"
subtitle="Receive an email notification when a shared album has new assets"
bind:checked={albumUpdateNotificationEnabled}
disabled={!emailNotificationsEnabled}
/>
</div>
<div class="flex justify-end">
<Button type="submit" size="sm" on:click={() => handleSave()}>Save</Button>
</div>
</div>
</form>
</div>
</section>

View file

@ -15,6 +15,7 @@
import PartnerSettings from './partner-settings.svelte';
import UserAPIKeyList from './user-api-key-list.svelte';
import UserProfileSettings from './user-profile-settings.svelte';
import NotificationsSettings from '$lib/components/user-settings-page/notifications-settings.svelte';
export let keys: ApiKeyResponseDto[] = [];
export let sessions: SessionResponseDto[] = [];
@ -45,6 +46,10 @@
<MemoriesSettings />
</SettingAccordion>
<SettingAccordion key="notifications" title="Notifications" subtitle="Manage notifications">
<NotificationsSettings />
</SettingAccordion>
{#if $featureFlags.loaded && $featureFlags.oauth}
<SettingAccordion key="oauth" title="OAuth" subtitle="Manage your OAuth connection" isOpen={oauthOpen || undefined}>
<OAuthSettings user={$user} />