refactor(web): ConfirmDialog and dialogController (#9716)

* wrapper

* no more callback

* refactor: wip

* refactor: wip

* refactor: wip

* pr feedback

* fix

* pr feedback
This commit is contained in:
Alex 2024-05-28 09:10:43 +07:00 committed by GitHub
parent f020d29ab6
commit bce916e4c8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
26 changed files with 281 additions and 317 deletions

View file

@ -1,5 +1,4 @@
<script lang="ts">
import ConfirmDialogue from '$lib/components/shared-components/confirm-dialogue.svelte';
import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
import { AppRoute } from '$lib/constants';
import { serverInfo } from '$lib/stores/server-info.store';
@ -9,6 +8,7 @@
import { mdiAccountEditOutline } from '@mdi/js';
import { createEventDispatcher } from 'svelte';
import Button from '../elements/buttons/button.svelte';
import { dialogController } from '$lib/components/shared-components/dialog/dialog';
export let user: UserAdminResponseDto;
export let canResetPassword = true;
@ -17,7 +17,6 @@
let error: string;
let success: string;
let isShowResetPasswordConfirmation = false;
let quotaSize = user.quotaSizeInBytes ? convertFromBytes(user.quotaSizeInBytes, 'GiB') : null;
const previousQutoa = user.quotaSizeInBytes;
@ -53,6 +52,15 @@
};
const resetPassword = async () => {
const isConfirmed = await dialogController.show({
id: 'confirm-reset-password',
prompt: `Are you sure you want to reset ${user.name}'s password?`,
});
if (!isConfirmed) {
return;
}
try {
newPassword = generatePassword();
@ -67,8 +75,6 @@
dispatch('resetPasswordSuccess');
} catch (error) {
handleError(error, 'Unable to reset password');
} finally {
isShowResetPasswordConfirmation = false;
}
};
@ -140,26 +146,8 @@
</form>
<svelte:fragment slot="sticky-bottom">
{#if canResetPassword}
<Button color="light-red" fullwidth on:click={() => (isShowResetPasswordConfirmation = true)}
>Reset password</Button
>
<Button color="light-red" fullwidth on:click={resetPassword}>Reset password</Button>
{/if}
<Button type="submit" fullwidth form="edit-user-form">Confirm</Button>
</svelte:fragment>
</FullScreenModal>
{#if isShowResetPasswordConfirmation}
<ConfirmDialogue
id="reset-password-modal"
title="Reset password"
confirmText="Reset"
onConfirm={resetPassword}
onClose={() => (isShowResetPasswordConfirmation = false)}
>
<svelte:fragment slot="prompt">
<p>
Are you sure you want to reset <b>{user.name}</b>'s password?
</p>
</svelte:fragment>
</ConfirmDialogue>
{/if}