Use cookies for client requests (#377)

* Use cookie for frontend request

* Remove api helper to use SDK

* Added error handling to status box

* Remove additional places that check for session.user

* Refactor sending password

* prettier clean up

* remove deadcode

* Move all authentication requests to the client

* refactor upload panel to only fetch assets after the upload panel disappear

* Added keydown to remove focus on title change on album viewer
This commit is contained in:
Alex
2022-07-26 12:28:07 -05:00
committed by GitHub
parent 2ebb755f00
commit 83cbf51704
54 changed files with 4954 additions and 4540 deletions

View File

@@ -1,49 +1,50 @@
<script lang="ts">
import { getRequest } from '$lib/utils/api-helper';
import { onDestroy, onMount } from 'svelte';
import { serverEndpoint } from '$lib/constants';
import Cloud from 'svelte-material-icons/Cloud.svelte';
import Dns from 'svelte-material-icons/Dns.svelte';
import LoadingSpinner from './loading-spinner.svelte';
import { goto } from '$app/navigation';
type ServerInfoType = {
diskAvailable: string;
diskAvailableRaw: number;
diskSize: string;
diskSizeRaw: number;
diskUsagePercentage: number;
diskUse: string;
diskUseRaw: number;
};
import { api, ServerInfoResponseDto } from '@api';
let endpoint = serverEndpoint;
let isServerOk = true;
let serverVersion = '';
let serverInfoRes: ServerInfoType;
let serverInfo: ServerInfoResponseDto;
onMount(async () => {
const res = await getRequest('server-info/version', '');
serverVersion = `v${res.major}.${res.minor}.${res.patch}`;
try {
const { data: version } = await api.serverInfoApi.getServerVersion();
serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
serverVersion = `v${version.major}.${version.minor}.${version.patch}`;
getStorageUsagePercentage();
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
getStorageUsagePercentage();
} catch (e) {
console.log('Error [StatusBox] [onMount]');
isServerOk = false;
}
});
const pingServerInterval = setInterval(async () => {
const response = await getRequest('server-info/ping', '');
try {
const { data: pingReponse } = await api.serverInfoApi.pingServer();
if (response.res === 'pong') isServerOk = true;
else isServerOk = false;
if (pingReponse.res === 'pong') isServerOk = true;
else isServerOk = false;
serverInfoRes = (await getRequest('server-info', '')) as ServerInfoType;
const { data: serverInfoRes } = await api.serverInfoApi.getServerInfo();
serverInfo = serverInfoRes;
} catch (e) {
console.log('Error [StatusBox] [pingServerInterval]');
isServerOk = false;
}
}, 10000);
onDestroy(() => clearInterval(pingServerInterval));
const getStorageUsagePercentage = () => {
return Math.round((serverInfoRes.diskUseRaw / serverInfoRes.diskSizeRaw) * 100);
return Math.round((serverInfo?.diskUseRaw / serverInfo?.diskSizeRaw) * 100);
};
</script>
@@ -54,12 +55,15 @@
</div>
<div>
<p class="text-sm font-medium text-immich-primary">Storage</p>
{#if serverInfoRes}
{#if serverInfo}
<div class="w-full bg-gray-200 rounded-full h-[7px] dark:bg-gray-700 my-2">
<!-- style={`width: ${$downloadAssets[fileName]}%`} -->
<div class="bg-immich-primary h-[7px] rounded-full" style={`width: ${getStorageUsagePercentage()}%`} />
<div
class="bg-immich-primary h-[7px] rounded-full"
style={`width: ${getStorageUsagePercentage()}%`}
/>
</div>
<p class="text-xs">{serverInfoRes?.diskUse} of {serverInfoRes?.diskSize} used</p>
<p class="text-xs">{serverInfo?.diskUse} of {serverInfo?.diskSize} used</p>
{:else}
<div class="mt-2">
<LoadingSpinner />