frontend: disabled button while processing password reset

This commit is contained in:
Alex
2025-02-28 08:51:35 +01:00
parent 8137f121ed
commit ad599ae3f4
4 changed files with 17 additions and 7 deletions

View File

@@ -127,7 +127,7 @@
</div> </div>
<div class="button-container"> <div class="button-container">
{#if isUpdating} {#if isUpdating}
<SmallLoader width={30} message={'Aktualisiere...'} /> <SmallLoader width={30} message={$t('loading.updating')} />
{:else} {:else}
<button type="button" class="button-dark" on:click={() => dispatch('cancel')}> <button type="button" class="button-dark" on:click={() => dispatch('cancel')}>
{$t('cancel')}</button {$t('cancel')}</button

View File

@@ -234,7 +234,7 @@
options={userStatusOptions} options={userStatusOptions}
readonly={role_id === 0} readonly={role_id === 0}
/> />
{#if localUser.role_id === 8} {#if role_id === 8}
<InputField <InputField
name="user[role_id]" name="user[role_id]"
type="select" type="select"
@@ -261,7 +261,7 @@
/> />
<InputField <InputField
name="user[first_name]" name="user[first_name]"
label={$t('first_name')} label={$t('user.first_name')}
bind:value={localUser.first_name} bind:value={localUser.first_name}
placeholder={$t('placeholder.first_name')} placeholder={$t('placeholder.first_name')}
required={true} required={true}
@@ -322,7 +322,7 @@
bind:value={localUser.city} bind:value={localUser.city}
placeholder={$t('placeholder.city')} placeholder={$t('placeholder.city')}
/> />
{#if localUser.role_id > 0} {#if role_id > 0}
<InputField <InputField
name="user[notes]" name="user[notes]"
type="textarea" type="textarea"
@@ -528,7 +528,7 @@
</div> </div>
<div class="button-container"> <div class="button-container">
{#if isUpdating} {#if isUpdating}
<SmallLoader width={30} message={'Aktualisiere...'} /> <SmallLoader width={30} message={$t('loading.updating')} />
{:else} {:else}
<button type="button" class="button-dark" on:click={() => dispatch('cancel')}> <button type="button" class="button-dark" on:click={() => dispatch('cancel')}>
{$t('cancel')}</button {$t('cancel')}</button

View File

@@ -134,7 +134,9 @@ export default {
}, },
loading: { loading: {
user_data: 'Lade Nutzerdaten', user_data: 'Lade Nutzerdaten',
subscription_data: 'Lade Modelldaten' subscription_data: 'Lade Modelldaten',
please_wait: 'Bitte warten...',
updating: 'Aktualisiere...'
}, },
dialog: { dialog: {
user_deletion: 'Soll der Nutzer {firstname} {lastname} wirklich gelöscht werden?', user_deletion: 'Soll der Nutzer {firstname} {lastname} wirklich gelöscht werden?',

View File

@@ -1,15 +1,19 @@
<script> <script>
import { applyAction, enhance } from '$app/forms'; import { applyAction, enhance } from '$app/forms';
import SmallLoader from '$lib/components/SmallLoader.svelte';
import { receive, send } from '$lib/utils/helpers'; import { receive, send } from '$lib/utils/helpers';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
/** @type {import('./$types').ActionData} */ /** @type {import('./$types').ActionData} */
export let form; export let form;
let loading = false;
/** @type {import('./$types').SubmitFunction} */ /** @type {import('./$types').SubmitFunction} */
const handleRequestChange = async () => { const handleRequestChange = async () => {
loading = true;
return async ({ result }) => { return async ({ result }) => {
await applyAction(result); await applyAction(result);
loading = false;
}; };
}; };
</script> </script>
@@ -40,6 +44,10 @@
required required
/> />
</div> </div>
<button class="button-dark">{$t('confirm')}</button> {#if loading}
<SmallLoader width={30} message={$t('loading.please_wait')} />
{:else}
<button class="button-dark" disabled={loading}>{$t('confirm')}</button>
{/if}
</form> </form>
</div> </div>