From 9d6e56298b4077b1c6407211114157460175657c Mon Sep 17 00:00:00 2001
From: Tim Haasdyk <tim_haasdyk@sil.org>
Date: Fri, 20 Oct 2023 11:56:03 +0200
Subject: [PATCH] Svelte code formatting

---
 frontend/src/lib/components/TusUpload.svelte  |  37 +--
 .../project/[project_code]/+page.svelte       | 131 ++++----
 .../[project_code]/ResetProjectModal.svelte   | 297 +++++++++---------
 3 files changed, 241 insertions(+), 224 deletions(-)

diff --git a/frontend/src/lib/components/TusUpload.svelte b/frontend/src/lib/components/TusUpload.svelte
index 4c4b4cd5d..b81387f46 100644
--- a/frontend/src/lib/components/TusUpload.svelte
+++ b/frontend/src/lib/components/TusUpload.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
-  import {Upload, type DetailedError} from 'tus-js-client';
+  import { Upload, type DetailedError } from 'tus-js-client';
   import Button from '$lib/forms/Button.svelte';
-  import {env} from '$env/dynamic/public';
+  import { env } from '$env/dynamic/public';
   import FormField from '$lib/forms/FormField.svelte';
-  import {createEventDispatcher, onDestroy} from 'svelte';
+  import { createEventDispatcher, onDestroy } from 'svelte';
   import FormError from '$lib/forms/FormError.svelte';
   import t from '$lib/i18n';
 
@@ -13,7 +13,7 @@
     Error = 'Error',
     Uploading = 'Uploading',
     Paused = 'Paused',
-    Complete = 'Complete'
+    Complete = 'Complete',
   }
 
   export let endpoint: string;
@@ -22,7 +22,7 @@
   export let inputLabel: string = $t('tus.select_file');
   export let inputDescription: string | undefined = undefined;
   const dispatch = createEventDispatcher<{
-    uploadComplete: { upload: Upload }
+    uploadComplete: { upload: Upload };
   }>();
 
   let status = UploadStatus.NoFile;
@@ -47,17 +47,16 @@
       chunkSize: maxUploadChunkSizeMb * 1024 * 1024,
       endpoint,
       metadata: {
-        filetype: file.type
+        filetype: file.type,
       },
       uploadDataDuringCreation: false,
       onProgress: (bytesUploaded, bytesTotal) => {
-        percent = bytesTotal > 0 ? bytesUploaded / bytesTotal * 100 : 0;
+        percent = bytesTotal > 0 ? (bytesUploaded / bytesTotal) * 100 : 0;
       },
       onSuccess: () => {
         status = UploadStatus.Complete;
         percent = 100;
-        if (upload)
-          dispatch('uploadComplete', {upload});
+        if (upload) dispatch('uploadComplete', { upload });
       },
       onError: (err) => {
         status = UploadStatus.Error;
@@ -78,7 +77,7 @@
 
         const status = err.originalResponse ? err.originalResponse.getStatus() : 0;
         return navigator.onLine && (status === 409 || status == 423 || status < 400 || 499 < status);
-      }
+      },
     });
     percent = 0;
     status = UploadStatus.Ready;
@@ -124,14 +123,16 @@
 <div class="space-y-4">
   <form>
     <FormField label={inputLabel} id="tus-upload" error={fileError} description={inputDescription}>
-      <input id="tus-upload"
-             type="file"
-             {accept}
-             class="file-input file-input-bordered file-input-primary"
-             on:cancel|stopPropagation
-             on:change={fileSelected}/>
+      <input
+        id="tus-upload"
+        type="file"
+        {accept}
+        class="file-input file-input-bordered file-input-primary"
+        on:cancel|stopPropagation
+        on:change={fileSelected}
+      />
     </FormField>
-    <FormError error={uploadError}/>
+    <FormError error={uploadError} />
   </form>
 </div>
 
@@ -139,6 +140,6 @@
   <Button style="btn-success" disabled={status > UploadStatus.Ready} on:click={startUpload}>{uploadLabel}</Button>
   <div class="flex-1">
     <p class="label label-text py-0">{$t('tus.upload_progress')}</p>
-    <progress class="progress progress-success" class:progress-error={uploadError} value={percent} max="100"/>
+    <progress class="progress progress-success" class:progress-error={uploadError} value={percent} max="100" />
   </div>
 </div>
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
index b66732704..bd4726468 100644
--- a/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
+++ b/frontend/src/routes/(authenticated)/project/[project_code]/+page.svelte
@@ -29,8 +29,8 @@
   import MoreSettings from '$lib/components/MoreSettings.svelte';
   import { AdminContent, Page } from '$lib/layout';
   import SvelteMarkdown from 'svelte-markdown';
-  import {ProjectMigrationStatus, ResetStatus} from '$lib/gql/generated/graphql';
-  import {onMount} from 'svelte';
+  import { ProjectMigrationStatus, ResetStatus } from '$lib/gql/generated/graphql';
+  import { onMount } from 'svelte';
   import Button from '$lib/forms/Button.svelte';
   import Icon from '$lib/icons/Icon.svelte';
 
@@ -64,7 +64,7 @@
 
   let resetProjectModal: ResetProjectModal;
   async function resetProject(): Promise<void> {
-    await resetProjectModal.open(_project.code, _project.resetStatus)
+    await resetProjectModal.open(_project.code, _project.resetStatus);
   }
 
   let removeUserModal: DeleteModal;
@@ -139,13 +139,13 @@
     [ProjectMigrationStatus.Migrating]: 'Migrating',
     [ProjectMigrationStatus.Unknown]: 'Unknown',
     [ProjectMigrationStatus.PrivateRedmine]: 'Not Migrated (private)',
-      [ProjectMigrationStatus.PublicRedmine]: 'Not Migrated (public)',
+    [ProjectMigrationStatus.PublicRedmine]: 'Not Migrated (public)',
   } satisfies Record<ProjectMigrationStatus, string>;
   onMount(() => {
-      migrationStatus = project?.migrationStatus ?? ProjectMigrationStatus.Unknown;
-      if (migrationStatus === ProjectMigrationStatus.Migrating) {
-          void watchMigrationStatus();
-      }
+    migrationStatus = project?.migrationStatus ?? ProjectMigrationStatus.Unknown;
+    if (migrationStatus === ProjectMigrationStatus.Migrating) {
+      void watchMigrationStatus();
+    }
   });
 
   async function watchMigrationStatus(): Promise<void> {
@@ -176,55 +176,59 @@
       <div class="space-y-2 space-x-1">
         <div class="float-right mt-1 sm:mt-2 md:mt-1">
           {#if migrationStatus !== ProjectMigrationStatus.Migrating}
-              <Dropdown>
-                <!-- svelte-ignore a11y-label-has-associated-control -->
-                <label bind:this={getProjectDropdownTrigger} tabindex="-1" class="btn btn-sm md:btn-md btn-success">
-                  {$t('project_page.get_project.label')}
-                  <span class="i-mdi-dots-vertical text-2xl" />
-                </label>
-                <div slot="content" class="card w-[calc(100vw-1rem)] sm:max-w-[35rem]">
-                  <div class="card-body max-sm:p-4">
-                    <div class="prose">
-                      <SvelteMarkdown
-                        source={$t('project_page.get_project.instructions', {type: _project.type, code: data.code, name: _project.name})}>
-                      </SvelteMarkdown>
-                    </div>
-                    <AdminContent>
-                      <FormField label={$t('project_page.get_project.send_receive_url')}>
-                        <div class="join">
-                          <input
-                            value={projectHgUrl}
-                            class="input input-bordered join-item w-full focus:input-success"
-                            readonly
-                          />
-                          <div
-                            class="join-item tooltip-open"
-                            class:tooltip={copiedToClipboard}
-                            data-tip={$t('clipboard.copied')}
-                          >
-                            {#if copiedToClipboard}
-                              <IconButton disabled icon="i-mdi-check" style="btn-outline btn-success" />
-                            {:else}
-                              <IconButton
-                                loading={copyingToClipboard}
-                                icon="i-mdi-content-copy"
-                                style="btn-outline"
-                                on:click={copyProjectUrlToClipboard}
-                              />
-                            {/if}
-                          </div>
-                        </div>
-                      </FormField>
-                    </AdminContent>
+            <Dropdown>
+              <!-- svelte-ignore a11y-label-has-associated-control -->
+              <label bind:this={getProjectDropdownTrigger} tabindex="-1" class="btn btn-sm md:btn-md btn-success">
+                {$t('project_page.get_project.label')}
+                <span class="i-mdi-dots-vertical text-2xl" />
+              </label>
+              <div slot="content" class="card w-[calc(100vw-1rem)] sm:max-w-[35rem]">
+                <div class="card-body max-sm:p-4">
+                  <div class="prose">
+                    <SvelteMarkdown
+                      source={$t('project_page.get_project.instructions', {
+                        type: _project.type,
+                        code: data.code,
+                        name: _project.name,
+                      })}
+                    />
                   </div>
+                  <AdminContent>
+                    <FormField label={$t('project_page.get_project.send_receive_url')}>
+                      <div class="join">
+                        <input
+                          value={projectHgUrl}
+                          class="input input-bordered join-item w-full focus:input-success"
+                          readonly
+                        />
+                        <div
+                          class="join-item tooltip-open"
+                          class:tooltip={copiedToClipboard}
+                          data-tip={$t('clipboard.copied')}
+                        >
+                          {#if copiedToClipboard}
+                            <IconButton disabled icon="i-mdi-check" style="btn-outline btn-success" />
+                          {:else}
+                            <IconButton
+                              loading={copyingToClipboard}
+                              icon="i-mdi-content-copy"
+                              style="btn-outline"
+                              on:click={copyProjectUrlToClipboard}
+                            />
+                          {/if}
+                        </div>
+                      </div>
+                    </FormField>
+                  </AdminContent>
                 </div>
-              </Dropdown>
+              </div>
+            </Dropdown>
           {/if}
           {#if migrationStatus === ProjectMigrationStatus.PublicRedmine || migrationStatus === ProjectMigrationStatus.PrivateRedmine}
             <AdminContent>
               <Button on:click={migrateProject}>
                 Migrate Project
-                <Icon icon="i-mdi-source-branch-sync"/>
+                <Icon icon="i-mdi-source-branch-sync" />
               </Button>
             </AdminContent>
           {/if}
@@ -241,21 +245,25 @@
           </span>
         </div>
         <BadgeList>
-          <ProjectTypeBadge type={project.type}/>
+          <ProjectTypeBadge type={project.type} />
           <Badge>
-            <FormatRetentionPolicy policy={project.retentionPolicy}/>
+            <FormatRetentionPolicy policy={project.retentionPolicy} />
           </Badge>
           {#if migrationStatus === ProjectMigrationStatus.Migrating}
-            <Badge><span class="loading loading-spinner loading-xs"></span> Migrating</Badge>
+            <Badge><span class="loading loading-spinner loading-xs" /> Migrating</Badge>
           {:else}
             <Badge>{migrationStatusTable[migrationStatus]}</Badge>
           {/if}
           {#if project.resetStatus === ResetStatus.InProgress}
-            <button class:tooltip={isAdmin(user)} data-tip={$t('project_page.reset_project_modal.click_to_continue')}
-              disabled={!isAdmin(user)} on:click={resetProject}>
+            <button
+              class:tooltip={isAdmin(user)}
+              data-tip={$t('project_page.reset_project_modal.click_to_continue')}
+              disabled={!isAdmin(user)}
+              on:click={resetProject}
+            >
               <Badge type="badge-warning">
                 {$t('project_page.reset_project_modal.reset_in_progress')}
-                <span class="i-mdi-warning text-xl mb-[-2px]"/>
+                <span class="i-mdi-warning text-xl mb-[-2px]" />
               </Badge>
             </button>
           {/if}
@@ -294,12 +302,11 @@
 
         <BadgeList>
           {#each project.users as member}
-            {@const canManageMember = canManage && (member.user.id !== userId  || isAdmin(user))}
+            {@const canManageMember = canManage && (member.user.id !== userId || isAdmin(user))}
             <Dropdown disabled={!canManageMember}>
               <MemberBadge
                 member={{ name: member.user.name, role: member.role }}
-                canManage={canManageMember}
-              />
+                canManage={canManageMember} />
               <ul slot="content" class="menu">
                 <li>
                   <button on:click={() => changeMemberRole(member)}>
@@ -357,9 +364,9 @@
             {$t('delete_project_modal.submit')}<TrashIcon />
           </button>
           <AdminContent>
-              <button class="btn btn-accent" on:click={resetProject}>
-                {$t('project_page.reset_project_modal.submit')}<CircleArrowIcon />
-              </button>
+            <button class="btn btn-accent" on:click={resetProject}>
+              {$t('project_page.reset_project_modal.submit')}<CircleArrowIcon />
+            </button>
             <ResetProjectModal bind:this={resetProjectModal} />
           </AdminContent>
         </MoreSettings>
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/ResetProjectModal.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/ResetProjectModal.svelte
index 69922c059..724ee0225 100644
--- a/frontend/src/routes/(authenticated)/project/[project_code]/ResetProjectModal.svelte
+++ b/frontend/src/routes/(authenticated)/project/[project_code]/ResetProjectModal.svelte
@@ -1,164 +1,173 @@
 <script lang="ts">
-    import Input from '$lib/forms/Input.svelte';
-    import Checkbox from '$lib/forms/Checkbox.svelte';
-    import {tScoped} from '$lib/i18n';
-    import {z} from 'zod';
-    import {CircleArrowIcon} from '$lib/icons';
-    import Modal from '$lib/components/modals/Modal.svelte';
-    import {lexSuperForm} from '$lib/forms';
-    import Form from '$lib/forms/Form.svelte';
-    import TusUpload from '$lib/components/TusUpload.svelte';
-    import {ResetStatus} from '$lib/gql/generated/graphql';
-    import {_refreshProjectMigrationStatusAndRepoInfo} from './+page';
-    import { scale } from 'svelte/transition';
-    import { bounceIn } from 'svelte/easing';
-
-    enum ResetSteps {
-        Download,
-        Reset,
-        Upload,
-        Finished
-    }
+  import Input from '$lib/forms/Input.svelte';
+  import Checkbox from '$lib/forms/Checkbox.svelte';
+  import { tScoped } from '$lib/i18n';
+  import { z } from 'zod';
+  import { CircleArrowIcon } from '$lib/icons';
+  import Modal from '$lib/components/modals/Modal.svelte';
+  import { lexSuperForm } from '$lib/forms';
+  import Form from '$lib/forms/Form.svelte';
+  import TusUpload from '$lib/components/TusUpload.svelte';
+  import { ResetStatus } from '$lib/gql/generated/graphql';
+  import { _refreshProjectMigrationStatusAndRepoInfo } from './+page';
+  import { scale } from 'svelte/transition';
+  import { bounceIn } from 'svelte/easing';
+
+  enum ResetSteps {
+    Download,
+    Reset,
+    Upload,
+    Finished,
+  }
 
-    let currentStep = ResetSteps.Download;
+  let currentStep = ResetSteps.Download;
 
-    function nextStep(): void {
-        currentStep++;
-    }
+  function nextStep(): void {
+    currentStep++;
+  }
 
-    function previousStep(): void {
-        currentStep--;
-    }
+  function previousStep(): void {
+    currentStep--;
+  }
 
-    let code: string;
-    let modal: Modal;
+  let code: string;
+  let modal: Modal;
 
-    export async function open(_code: string, resetStatus: ResetStatus): Promise<boolean> {
-        code = _code;
-        if (resetStatus == ResetStatus.InProgress) {
-            currentStep = ResetSteps.Upload;
-        }
-        await modal.openModal(true, true);
-        return currentStep == ResetSteps.Finished;
+  export async function open(_code: string, resetStatus: ResetStatus): Promise<boolean> {
+    code = _code;
+    if (resetStatus == ResetStatus.InProgress) {
+      currentStep = ResetSteps.Upload;
     }
+    await modal.openModal(true, true);
+    return currentStep == ResetSteps.Finished;
+  }
 
-    const t = tScoped('project_page.reset_project_modal');
-
-    let verify = z.object({
-        confirmProjectCode: z.string().refine((value) => value === code, () => ({message: $t('confirm_project_code_error')})),
-        confirmDownloaded: z.boolean().refine((value) => value, () => ({message: $t('confirm_downloaded_error')})),
-    });
-
-    let {form, errors, enhance, reset} = lexSuperForm(verify, async () => {
-        const url = `/api/project/resetProject/${code}`;
-        const resetResponse = await fetch(url, {method: 'post'});
-        //we should do the reset via a mutation, but this is easier for now
-        //we need to refresh the status so if the admin closes the dialog they can resume back where they left off.
-        await _refreshProjectMigrationStatusAndRepoInfo(code);
-        if (resetResponse.ok) {
-            nextStep();
-        }
-    });
-
-    async function uploadComplete(): Promise<void> {
-        await _refreshProjectMigrationStatusAndRepoInfo(code);
-        nextStep();
+  const t = tScoped('project_page.reset_project_modal');
+
+  let verify = z.object({
+    confirmProjectCode: z.string().refine(
+      (value) => value === code,
+      () => ({ message: $t('confirm_project_code_error') })
+    ),
+    confirmDownloaded: z.boolean().refine(
+      (value) => value,
+      () => ({ message: $t('confirm_downloaded_error') })
+    ),
+  });
+
+  let { form, errors, enhance, reset } = lexSuperForm(verify, async () => {
+    const url = `/api/project/resetProject/${code}`;
+    const resetResponse = await fetch(url, { method: 'post' });
+    //we should do the reset via a mutation, but this is easier for now
+    //we need to refresh the status so if the admin closes the dialog they can resume back where they left off.
+    await _refreshProjectMigrationStatusAndRepoInfo(code);
+    if (resetResponse.ok) {
+      nextStep();
     }
+  });
 
-    function onClose(): void {
-        currentStep = ResetSteps.Download;
-        reset();
-    }
+  async function uploadComplete(): Promise<void> {
+    await _refreshProjectMigrationStatusAndRepoInfo(code);
+    nextStep();
+  }
 
+  function onClose(): void {
+    currentStep = ResetSteps.Download;
+    reset();
+  }
 </script>
 
 <div class="reset-modal contents" class:hide-modal-actions={currentStep === ResetSteps.Upload}>
-    <Modal bind:this={modal} on:close={onClose} showCloseButton={false}>
-        <h2 class="text-xl mb-4">{$t('title', { code })}</h2>
-        <ul class="steps w-full mb-2">
-            <li class="step step-primary">{$t('backup_step')}</li>
-            <li class="step" class:step-primary={currentStep >= ResetSteps.Reset}>{$t('reset_step')}</li>
-            <li class="step" class:step-primary={currentStep >= ResetSteps.Upload}>{$t('restore_step')}</li>
-            <li class="step" class:step-primary={currentStep >= ResetSteps.Finished}>{$t('finished_step')}</li>
-        </ul>
-
-        <div class="divider my-2" />
-
-        {#if currentStep === ResetSteps.Download}
-            <p class="mb-2 label">
-              {$t('download_instruction')}
-            </p>
-            <a rel="external" href="/api/project/backupProject/{code}"
-                class="btn btn-success" download>
-                {$t('download_button')}
-                <span class="i-mdi-download text-2xl"/>
-            </a>
-        {:else if currentStep === ResetSteps.Reset}
-            <Form id="reset-form" {enhance}>
-                <Checkbox
-                        id="confirmDownloaded"
-                        label={$t('confirm_downloaded')}
-                        bind:value={$form.confirmDownloaded}
-                        error={$errors.confirmDownloaded}/>
-                <Input
-                        id="confirmProjectCode"
-                        type="text"
-                        label={$t('confirm_project_code')}
-                        bind:value={$form.confirmProjectCode}
-                        error={$errors.confirmProjectCode}
-                />
-            </Form>
-
-        {:else if currentStep === ResetSteps.Upload}
-            <div class="label">
-              {$t('upload_instruction')}
-            </div>
-            <TusUpload endpoint={'/api/project/upload-zip/' + code}
-                       uploadLabel={$t('upload_project')}
-                       inputLabel={$t('select_zip')}
-                       inputDescription={$t('should_only_contain_hg')}
-                       accept="application/zip"
-                       on:uploadComplete={uploadComplete}/>
-        {:else if currentStep === ResetSteps.Finished}
-            <div class="text-center">
-              <p class="mb-2 label justify-center">
-                {$t('reset_success')}
-              </p>
-              <span class="i-mdi-check-circle-outline text-7xl text-success" transition:scale={{duration: 600, start: 0.7, easing: bounceIn}} />
-            </div>
-        {:else}
-            <span>Unknown step</span>
-        {/if}
-        <svelte:fragment slot="extraActions">
-          {#if currentStep === ResetSteps.Reset}
-            <button class="btn btn-secondary" on:click={previousStep}>
-              <span class="i-mdi-chevron-left text-2xl"/>
-                {$t('back')}
-            </button>
-          {/if}
-        </svelte:fragment>
-        <svelte:fragment slot="actions">
-            {#if currentStep === ResetSteps.Download}
-                <button class="btn btn-primary" on:click={nextStep}>
-                    {$t('i_have_working_backup')}
-                    <span class="i-mdi-chevron-right text-2xl"/>
-                </button>
-            {:else if currentStep === ResetSteps.Reset}
-                <button class="btn btn-primary" type="submit" form="reset-form">
-                    {$t('submit')}
-                    <CircleArrowIcon/>
-                </button>
-            {:else if currentStep === ResetSteps.Finished}
-                <button class="btn btn-primary" on:click={() => modal.submitModal()}>
-                  {$t('close')}
-                </button>
-            {/if}
-        </svelte:fragment>
-    </Modal>
+  <Modal bind:this={modal} on:close={onClose} showCloseButton={false}>
+    <h2 class="text-xl mb-4">{$t('title', { code })}</h2>
+    <ul class="steps w-full mb-2">
+      <li class="step step-primary">{$t('backup_step')}</li>
+      <li class="step" class:step-primary={currentStep >= ResetSteps.Reset}>{$t('reset_step')}</li>
+      <li class="step" class:step-primary={currentStep >= ResetSteps.Upload}>{$t('restore_step')}</li>
+      <li class="step" class:step-primary={currentStep >= ResetSteps.Finished}>{$t('finished_step')}</li>
+    </ul>
+
+    <div class="divider my-2" />
+
+    {#if currentStep === ResetSteps.Download}
+      <p class="mb-2 label">
+        {$t('download_instruction')}
+      </p>
+      <a rel="external" href="/api/project/backupProject/{code}" class="btn btn-success" download>
+        {$t('download_button')}
+        <span class="i-mdi-download text-2xl" />
+      </a>
+    {:else if currentStep === ResetSteps.Reset}
+      <Form id="reset-form" {enhance}>
+        <Checkbox
+          id="confirmDownloaded"
+          label={$t('confirm_downloaded')}
+          bind:value={$form.confirmDownloaded}
+          error={$errors.confirmDownloaded}
+        />
+        <Input
+          id="confirmProjectCode"
+          type="text"
+          label={$t('confirm_project_code')}
+          bind:value={$form.confirmProjectCode}
+          error={$errors.confirmProjectCode}
+        />
+      </Form>
+    {:else if currentStep === ResetSteps.Upload}
+      <div class="label">
+        {$t('upload_instruction')}
+      </div>
+      <TusUpload
+        endpoint={'/api/project/upload-zip/' + code}
+        uploadLabel={$t('upload_project')}
+        inputLabel={$t('select_zip')}
+        inputDescription={$t('should_only_contain_hg')}
+        accept="application/zip"
+        on:uploadComplete={uploadComplete}
+      />
+    {:else if currentStep === ResetSteps.Finished}
+      <div class="text-center">
+        <p class="mb-2 label justify-center">
+          {$t('reset_success')}
+        </p>
+        <span
+          class="i-mdi-check-circle-outline text-7xl text-success"
+          transition:scale={{ duration: 600, start: 0.7, easing: bounceIn }}
+        />
+      </div>
+    {:else}
+      <span>Unknown step</span>
+    {/if}
+    <svelte:fragment slot="extraActions">
+      {#if currentStep === ResetSteps.Reset}
+        <button class="btn btn-secondary" on:click={previousStep}>
+          <span class="i-mdi-chevron-left text-2xl" />
+          {$t('back')}
+        </button>
+      {/if}
+    </svelte:fragment>
+    <svelte:fragment slot="actions">
+      {#if currentStep === ResetSteps.Download}
+        <button class="btn btn-primary" on:click={nextStep}>
+          {$t('i_have_working_backup')}
+          <span class="i-mdi-chevron-right text-2xl" />
+        </button>
+      {:else if currentStep === ResetSteps.Reset}
+        <button class="btn btn-primary" type="submit" form="reset-form">
+          {$t('submit')}
+          <CircleArrowIcon />
+        </button>
+      {:else if currentStep === ResetSteps.Finished}
+        <button class="btn btn-primary" on:click={() => modal.submitModal()}>
+          {$t('close')}
+        </button>
+      {/if}
+    </svelte:fragment>
+  </Modal>
 </div>
 
 <style>
   :global(.hide-modal-actions .modal-action) {
-      display: none !important;
+    display: none !important;
   }
 </style>