mirror of
https://github.com/immich-app/immich.git
synced 2024-12-25 10:43:13 +02:00
refactor(web): user-settings (#3700)
* refactor(web): user-settings * feat: move the logic to the server * use const * fix: error 403 * fix: remove console.log
This commit is contained in:
parent
53f5643994
commit
78a2a9e666
@ -1,22 +1,17 @@
|
||||
<script lang="ts">
|
||||
import { api, AuthDeviceResponseDto } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import { notificationController, NotificationType } from '../shared-components/notification/notification';
|
||||
import DeviceCard from './device-card.svelte';
|
||||
|
||||
let devices: AuthDeviceResponseDto[] = [];
|
||||
export let devices: AuthDeviceResponseDto[];
|
||||
let deleteDevice: AuthDeviceResponseDto | null = null;
|
||||
let deleteAll = false;
|
||||
|
||||
const refresh = () => api.authenticationApi.getAuthDevices().then(({ data }) => (devices = data));
|
||||
|
||||
onMount(() => {
|
||||
refresh();
|
||||
});
|
||||
|
||||
$: currentDevice = devices.find((device) => device.current);
|
||||
$: otherDevices = devices.filter((device) => !device.current);
|
||||
|
||||
|
@ -5,13 +5,12 @@
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
import PartnerSelectionModal from './partner-selection-modal.svelte';
|
||||
import { handleError } from '../../utils/handle-error';
|
||||
import { onMount } from 'svelte';
|
||||
import ConfirmDialogue from '../shared-components/confirm-dialogue.svelte';
|
||||
import CircleIconButton from '../elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
let partners: UserResponseDto[] = [];
|
||||
export let partners: UserResponseDto[];
|
||||
let createPartner = false;
|
||||
let removePartner: UserResponseDto | null = null;
|
||||
|
||||
@ -46,10 +45,6 @@
|
||||
handleError(error, 'Unable to add partners');
|
||||
}
|
||||
};
|
||||
|
||||
onMount(async () => {
|
||||
await refreshPartners();
|
||||
});
|
||||
</script>
|
||||
|
||||
<section class="my-4">
|
||||
|
@ -1,6 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { api, APIKeyResponseDto } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import PencilOutline from 'svelte-material-icons/PencilOutline.svelte';
|
||||
import TrashCanOutline from 'svelte-material-icons/TrashCanOutline.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
@ -12,7 +11,7 @@
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import Button from '../elements/buttons/button.svelte';
|
||||
|
||||
let keys: APIKeyResponseDto[] = [];
|
||||
export let keys: APIKeyResponseDto[];
|
||||
|
||||
let newKey: Partial<APIKeyResponseDto> | null = null;
|
||||
let editKey: APIKeyResponseDto | null = null;
|
||||
@ -25,10 +24,6 @@
|
||||
year: 'numeric',
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
refreshKeys();
|
||||
});
|
||||
|
||||
async function refreshKeys() {
|
||||
const { data } = await api.keyApi.getKeys();
|
||||
keys = data;
|
||||
|
@ -1,7 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { oauth, UserResponseDto } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import { APIKeyResponseDto, AuthDeviceResponseDto, oauth, UserResponseDto } from '@api';
|
||||
import SettingAccordion from '../admin-page/settings/setting-accordion.svelte';
|
||||
import ChangePasswordSettings from './change-password-settings.svelte';
|
||||
import DeviceList from './device-list.svelte';
|
||||
@ -10,15 +9,19 @@
|
||||
import PartnerSettings from './partner-settings.svelte';
|
||||
import UserAPIKeyList from './user-api-key-list.svelte';
|
||||
import UserProfileSettings from './user-profile-settings.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
export let user: UserResponseDto;
|
||||
|
||||
export let keys: APIKeyResponseDto[] = [];
|
||||
export let devices: AuthDeviceResponseDto[] = [];
|
||||
export let partners: UserResponseDto[] = [];
|
||||
|
||||
let oauthEnabled = false;
|
||||
let oauthOpen = false;
|
||||
|
||||
onMount(async () => {
|
||||
oauthOpen = oauth.isCallback(window.location);
|
||||
|
||||
try {
|
||||
const { data } = await oauth.getConfig(window.location);
|
||||
oauthEnabled = data.enabled;
|
||||
@ -33,11 +36,11 @@
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="API Keys" subtitle="Manage your API keys">
|
||||
<UserAPIKeyList />
|
||||
<UserAPIKeyList bind:keys />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Authorized Devices" subtitle="Manage your logged-in devices">
|
||||
<DeviceList />
|
||||
<DeviceList bind:devices />
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Memories" subtitle="Manage what you see in your memories.">
|
||||
@ -59,5 +62,5 @@
|
||||
</SettingAccordion>
|
||||
|
||||
<SettingAccordion title="Sharing" subtitle="Manage sharing with partners">
|
||||
<PartnerSettings {user} />
|
||||
<PartnerSettings {user} bind:partners />
|
||||
</SettingAccordion>
|
||||
|
@ -2,13 +2,21 @@ import { AppRoute } from '$lib/constants';
|
||||
import { redirect } from '@sveltejs/kit';
|
||||
import type { PageServerLoad } from './$types';
|
||||
|
||||
export const load = (async ({ locals: { user } }) => {
|
||||
export const load = (async ({ parent, locals }) => {
|
||||
const { user } = await parent();
|
||||
if (!user) {
|
||||
throw redirect(302, AppRoute.AUTH_LOGIN);
|
||||
}
|
||||
|
||||
const { data: keys } = await locals.api.keyApi.getKeys();
|
||||
const { data: devices } = await locals.api.authenticationApi.getAuthDevices();
|
||||
const { data: partners } = await locals.api.partnerApi.getPartners({ direction: 'shared-by' });
|
||||
|
||||
return {
|
||||
user,
|
||||
keys,
|
||||
devices,
|
||||
partners,
|
||||
meta: {
|
||||
title: 'Settings',
|
||||
},
|
||||
|
@ -9,7 +9,7 @@
|
||||
<UserPageLayout user={data.user} title={data.meta.title}>
|
||||
<section class="mx-4 flex place-content-center">
|
||||
<div class="w-full max-w-3xl">
|
||||
<UserSettingsList user={data.user} />
|
||||
<UserSettingsList user={data.user} keys={data.keys} devices={data.devices} partners={data.partners} />
|
||||
</div>
|
||||
</section>
|
||||
</UserPageLayout>
|
||||
|
Loading…
Reference in New Issue
Block a user