mirror of
https://github.com/KevinMidboe/immich.git
synced 2025-12-08 20:29:05 +00:00
feat(server,web): migrate oauth settings from env to system config (#1061)
This commit is contained in:
Jason Rasmussen
GitHub
@@ -1,249 +0,0 @@
|
||||
<script lang="ts">
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
import { AdminSideBarSelection } from '$lib/models/admin-sidebar-selection';
|
||||
import SideBarButton from '$lib/components/shared-components/side-bar/side-bar-button.svelte';
|
||||
import AccountMultipleOutline from 'svelte-material-icons/AccountMultipleOutline.svelte';
|
||||
import Sync from 'svelte-material-icons/Sync.svelte';
|
||||
import Cog from 'svelte-material-icons/Cog.svelte';
|
||||
import Server from 'svelte-material-icons/Server.svelte';
|
||||
import NavigationBar from '$lib/components/shared-components/navigation-bar.svelte';
|
||||
import UserManagement from '$lib/components/admin-page/user-management.svelte';
|
||||
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
|
||||
import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
|
||||
import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
|
||||
import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
|
||||
import StatusBox from '$lib/components/shared-components/status-box.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import { api, ServerStatsResponseDto, UserResponseDto } from '@api';
|
||||
import JobsPanel from '$lib/components/admin-page/jobs/jobs-panel.svelte';
|
||||
import SettingsPanel from '$lib/components/admin-page/settings/settings-panel.svelte';
|
||||
import ServerStatsPanel from '$lib/components/admin-page/server-stats/server-stats-panel.svelte';
|
||||
import RestoreDialoge from '$lib/components/admin-page/restore-dialoge.svelte';
|
||||
|
||||
let selectedAction: AdminSideBarSelection = AdminSideBarSelection.USER_MANAGEMENT;
|
||||
|
||||
export let data: PageData;
|
||||
|
||||
let selectedUser: UserResponseDto;
|
||||
|
||||
let shouldShowEditUserForm = false;
|
||||
let shouldShowCreateUserForm = false;
|
||||
let shouldShowInfoPanel = false;
|
||||
let shouldShowDeleteConfirmDialog = false;
|
||||
let shouldShowRestoreDialog = false;
|
||||
let serverStat: ServerStatsResponseDto;
|
||||
|
||||
const onButtonClicked = (buttonType: CustomEvent) => {
|
||||
selectedAction = buttonType.detail['actionType'] as AdminSideBarSelection;
|
||||
};
|
||||
|
||||
onMount(() => {
|
||||
selectedAction = AdminSideBarSelection.USER_MANAGEMENT;
|
||||
getServerStats();
|
||||
});
|
||||
|
||||
const onUserCreated = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowCreateUserForm = false;
|
||||
};
|
||||
|
||||
const editUserHandler = async (event: CustomEvent) => {
|
||||
const { user } = event.detail;
|
||||
selectedUser = user;
|
||||
shouldShowEditUserForm = true;
|
||||
};
|
||||
|
||||
const onEditUserSuccess = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowEditUserForm = false;
|
||||
};
|
||||
|
||||
const onEditPasswordSuccess = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowEditUserForm = false;
|
||||
shouldShowInfoPanel = true;
|
||||
};
|
||||
|
||||
const deleteUserHandler = async (event: CustomEvent) => {
|
||||
const { user } = event.detail;
|
||||
selectedUser = user;
|
||||
shouldShowDeleteConfirmDialog = true;
|
||||
};
|
||||
|
||||
const onUserDeleteSuccess = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowDeleteConfirmDialog = false;
|
||||
};
|
||||
|
||||
const onUserDeleteFail = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowDeleteConfirmDialog = false;
|
||||
};
|
||||
|
||||
const restoreUserHandler = async (event: CustomEvent) => {
|
||||
const { user } = event.detail;
|
||||
selectedUser = user;
|
||||
shouldShowRestoreDialog = true;
|
||||
};
|
||||
|
||||
const onUserRestoreSuccess = async () => {
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowRestoreDialog = false;
|
||||
};
|
||||
|
||||
const onUserRestoreFail = async () => {
|
||||
// show fail dialog
|
||||
const getAllUsersRes = await api.userApi.getAllUsers(false);
|
||||
data.allUsers = getAllUsersRes.data;
|
||||
shouldShowRestoreDialog = false;
|
||||
};
|
||||
|
||||
const getServerStats = async () => {
|
||||
try {
|
||||
const res = await api.serverInfoApi.getStats();
|
||||
serverStat = res.data;
|
||||
} catch (e) {
|
||||
console.log(e);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
<title>Administration - Immich</title>
|
||||
</svelte:head>
|
||||
|
||||
<NavigationBar user={data.user} />
|
||||
|
||||
{#if shouldShowCreateUserForm}
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
|
||||
<CreateUserForm on:user-created={onUserCreated} />
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowEditUserForm}
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
|
||||
<EditUserForm
|
||||
user={selectedUser}
|
||||
on:edit-success={onEditUserSuccess}
|
||||
on:reset-password-success={onEditPasswordSuccess}
|
||||
/>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowDeleteConfirmDialog}
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowDeleteConfirmDialog = false)}>
|
||||
<DeleteConfirmDialog
|
||||
user={selectedUser}
|
||||
on:user-delete-success={onUserDeleteSuccess}
|
||||
on:user-delete-fail={onUserDeleteFail}
|
||||
/>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowRestoreDialog}
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowRestoreDialog = false)}>
|
||||
<RestoreDialoge
|
||||
user={selectedUser}
|
||||
on:user-restore-success={onUserRestoreSuccess}
|
||||
on:user-restore-fail={onUserRestoreFail}
|
||||
/>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
{#if shouldShowInfoPanel}
|
||||
<FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
|
||||
<div class="border bg-white shadow-sm w-[500px] rounded-3xl p-8 text-sm">
|
||||
<h1 class="font-medium text-immich-primary text-lg mb-4">Password reset success</h1>
|
||||
|
||||
<p>
|
||||
The user's password has been reset to the default <code
|
||||
class="font-bold bg-gray-200 px-2 py-1 rounded-md text-immich-primary">password</code
|
||||
>
|
||||
<br />
|
||||
Please inform the user, and they will need to change the password at the next log-on.
|
||||
</p>
|
||||
|
||||
<div class="flex w-full">
|
||||
<button
|
||||
on:click={() => (shouldShowInfoPanel = false)}
|
||||
class="mt-6 bg-immich-primary hover:bg-immich-primary/75 px-6 py-3 text-white rounded-full shadow-md w-full font-medium"
|
||||
>Done
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</FullScreenModal>
|
||||
{/if}
|
||||
|
||||
<section class="grid grid-cols-[250px_auto] relative pt-[72px] h-screen">
|
||||
<section id="admin-sidebar" class="pt-8 pr-6 flex flex-col gap-1">
|
||||
<SideBarButton
|
||||
title="Users"
|
||||
logo={AccountMultipleOutline}
|
||||
actionType={AdminSideBarSelection.USER_MANAGEMENT}
|
||||
isSelected={selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
|
||||
on:selected={onButtonClicked}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Jobs"
|
||||
logo={Sync}
|
||||
actionType={AdminSideBarSelection.JOBS}
|
||||
isSelected={selectedAction === AdminSideBarSelection.JOBS}
|
||||
on:selected={onButtonClicked}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Settings"
|
||||
logo={Cog}
|
||||
actionType={AdminSideBarSelection.SETTINGS}
|
||||
isSelected={selectedAction === AdminSideBarSelection.SETTINGS}
|
||||
on:selected={onButtonClicked}
|
||||
/>
|
||||
<SideBarButton
|
||||
title="Server Stats"
|
||||
logo={Server}
|
||||
actionType={AdminSideBarSelection.STATS}
|
||||
isSelected={selectedAction === AdminSideBarSelection.STATS}
|
||||
on:selected={onButtonClicked}
|
||||
/>
|
||||
<div class="mb-6 mt-auto">
|
||||
<StatusBox />
|
||||
</div>
|
||||
</section>
|
||||
<section class="overflow-y-auto relative">
|
||||
<div id="setting-title" class="pt-10 fixed w-full z-50">
|
||||
<h1 class="text-lg ml-8 mb-4 text-immich-primary dark:text-immich-dark-primary font-medium">
|
||||
{selectedAction}
|
||||
</h1>
|
||||
<hr class="dark:border-immich-dark-gray" />
|
||||
</div>
|
||||
|
||||
<section id="setting-content" class="relative pt-[85px] flex place-content-center">
|
||||
<section class="w-[800px] pt-5">
|
||||
{#if selectedAction === AdminSideBarSelection.USER_MANAGEMENT}
|
||||
<UserManagement
|
||||
allUsers={data.allUsers}
|
||||
on:create-user={() => (shouldShowCreateUserForm = true)}
|
||||
on:edit-user={editUserHandler}
|
||||
on:delete-user={deleteUserHandler}
|
||||
on:restore-user={restoreUserHandler}
|
||||
/>
|
||||
{/if}
|
||||
{#if selectedAction === AdminSideBarSelection.JOBS}
|
||||
<JobsPanel />
|
||||
{/if}
|
||||
{#if selectedAction === AdminSideBarSelection.SETTINGS}
|
||||
<SettingsPanel />
|
||||
{/if}
|
||||
{#if selectedAction === AdminSideBarSelection.STATS && serverStat}
|
||||
<ServerStatsPanel stats={serverStat} allUsers={data.allUsers} />
|
||||
{/if}
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
</section>
|
||||
|
||||
Reference in New Issue
Block a user