backup page fixes and new impls for new apis (#3437)

* wip: backup page fixes and new impls for new apis

* wip: more progress on backup fixes, almost done

* lint

* Backups cleanup

* Don't show create warning if creating

* Fix ongoing state

* Download support

* Support ready

* Disable auto backup button

* Use auth param for download of backups

* Disable install buttons when backup is in progress, add retrying

* Make prepare button have immediate feedback, don't refresh backups in all cases

* Intl:extract & rebase fixes

* Updated changelog and fix lint

---------

Co-authored-by: Prospector <prospectordev@gmail.com>

packages/ui/src/components/base/ButtonStyled.vue

@@ -195,7 +195,7 @@ const colorVariables = computed(() => {
   > *:first-child
   > *:first-child
   > :is(button, a, .button-like):first-child {
-  @apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight];
+  @apply flex cursor-pointer flex-row items-center justify-center border-solid border-2 border-transparent bg-[--_bg] text-[--_text] h-[--_height] min-w-[--_width] rounded-[--_radius] px-[--_padding-x] py-[--_padding-y] gap-[--_gap] font-[--_font-weight] whitespace-nowrap;
   transition:
     scale 0.125s ease-in-out,
     background-color 0.25s ease-in-out,
@@ -204,6 +204,7 @@ const colorVariables = computed(() => {
   svg:first-child {
     color: var(--_icon, var(--_text));
     transition: color 0.25s ease-in-out;
+    flex-shrink: 0;
   }
 
   &[disabled],

packages/ui/src/components/base/ProgressBar.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    progress: number
+    max?: number
+    color?: 'brand' | 'green' | 'red' | 'orange' | 'blue' | 'purple' | 'gray'
+    waiting?: boolean
+  }>(),
+  {
+    max: 1,
+    color: 'brand',
+    waiting: false,
+  },
+)
+
+const colors = {
+  brand: {
+    fg: 'bg-brand',
+    bg: 'bg-brand-highlight',
+  },
+  green: {
+    fg: 'bg-green',
+    bg: 'bg-bg-green',
+  },
+  red: {
+    fg: 'bg-red',
+    bg: 'bg-bg-red',
+  },
+  orange: {
+    fg: 'bg-orange',
+    bg: 'bg-bg-orange',
+  },
+  blue: {
+    fg: 'bg-blue',
+    bg: 'bg-bg-blue',
+  },
+  purple: {
+    fg: 'bg-purple',
+    bg: 'bg-bg-purple',
+  },
+  gray: {
+    fg: 'bg-gray',
+    bg: 'bg-bg-gray',
+  },
+}
+
+const percent = computed(() => props.progress / props.max)
+</script>
+<template>
+  <div class="flex w-[15rem] h-1 rounded-full overflow-hidden" :class="colors[props.color].bg">
+    <div
+      class="rounded-full progress-bar"
+      :class="[colors[props.color].fg, { 'progress-bar--waiting': waiting }]"
+      :style="!waiting ? { width: `${percent * 100}%` } : {}"
+    ></div>
+  </div>
+</template>
+<style scoped lang="scss">
+.progress-bar {
+  transition: width 0.2s ease-in-out;
+}
+
+.progress-bar--waiting {
+  animation: progress-bar-waiting 1s linear infinite;
+  position: relative;
+}
+
+@keyframes progress-bar-waiting {
+  0% {
+    left: -50%;
+    width: 20%;
+  }
+  50% {
+    width: 60%;
+  }
+  100% {
+    left: 100%;
+    width: 20%;
+  }
+}
+</style>

packages/ui/src/components/index.ts

@@ -26,6 +26,7 @@ export { default as Page } from './base/Page.vue'
 export { default as Pagination } from './base/Pagination.vue'
 export { default as PopoutMenu } from './base/PopoutMenu.vue'
 export { default as PreviewSelectButton } from './base/PreviewSelectButton.vue'
+export { default as ProgressBar } from './base/ProgressBar.vue'
 export { default as ProjectCard } from './base/ProjectCard.vue'
 export { default as RadialHeader } from './base/RadialHeader.vue'
 export { default as RadioButtons } from './base/RadioButtons.vue'
@@ -98,3 +99,6 @@ export { default as VersionSummary } from './version/VersionSummary.vue'
 
 // Settings
 export { default as ThemeSelector } from './settings/ThemeSelector.vue'
+
+// Servers
+export { default as BackupWarning } from './servers/backups/BackupWarning.vue'

packages/ui/src/components/modal/ConfirmModal.vue

@@ -5,26 +5,28 @@
         <span class="font-extrabold text-contrast text-lg">{{ title }}</span>
       </slot>
     </template>
-    <div>
-      <div class="markdown-body max-w-[35rem]" v-html="renderString(description)" />
-      <label v-if="hasToType" for="confirmation" class="confirmation-label">
+    <div class="flex flex-col gap-4">
+      <div
+        v-if="description"
+        class="markdown-body max-w-[35rem]"
+        v-html="renderString(description)"
+      />
+      <slot />
+      <label v-if="hasToType" for="confirmation">
         <span>
-          <strong>To verify, type</strong>
-          <em class="confirmation-text"> {{ confirmationText }} </em>
-          <strong>below:</strong>
+          To confirm you want to proceed, type
+          <span class="italic font-bold">{{ confirmationText }}</span> below:
         </span>
       </label>
-      <div class="confirmation-input">
-        <input
-          v-if="hasToType"
-          id="confirmation"
-          v-model="confirmation_typed"
-          type="text"
-          placeholder="Type here..."
-          @input="type"
-        />
-      </div>
-      <div class="flex gap-2 mt-6">
+      <input
+        v-if="hasToType"
+        id="confirmation"
+        v-model="confirmation_typed"
+        type="text"
+        placeholder="Type here..."
+        class="max-w-[20rem]"
+      />
+      <div class="flex gap-2">
         <ButtonStyled :color="danger ? 'red' : 'brand'">
           <button :disabled="action_disabled" @click="proceed">
             <component :is="proceedIcon" />
@@ -65,8 +67,8 @@ const props = defineProps({
   },
   description: {
     type: String,
-    default: 'No description defined',
-    required: true,
+    default: undefined,
+    required: false,
   },
   proceedIcon: {
     type: Object,
@@ -95,21 +97,20 @@ const props = defineProps({
 const emit = defineEmits(['proceed'])
 const modal = ref(null)
 
-const action_disabled = ref(props.hasToType)
 const confirmation_typed = ref('')
 
+const action_disabled = computed(
+  () =>
+    props.hasToType &&
+    confirmation_typed.value.toLowerCase() !== props.confirmationText.toLowerCase(),
+)
+
 function proceed() {
   modal.value.hide()
+  confirmation_typed.value = ''
   emit('proceed')
 }
 
-function type() {
-  if (props.hasToType) {
-    action_disabled.value =
-      confirmation_typed.value.toLowerCase() !== props.confirmationText.toLowerCase()
-  }
-}
-
 function show() {
   modal.value.show()
 }

packages/ui/src/components/servers/backups/BackupWarning.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { IssuesIcon } from '@modrinth/assets'
+import AutoLink from '../../base/AutoLink.vue'
+
+defineProps<{
+  backupLink: string
+}>()
+</script>
+<template>
+  <div
+    class="flex gap-3 rounded-2xl border-2 border-solid border-orange bg-bg-orange px-4 py-3 font-medium text-contrast"
+  >
+    <IssuesIcon class="mt-1 h-5 w-5 shrink-0 text-orange" />
+    <span class="leading-normal">
+      You may want to
+      <AutoLink
+        :to="backupLink"
+        class="font-semibold text-orange hover:underline active:brightness-125"
+        >create a backup</AutoLink
+      >
+      before proceeding, as this process is irreversible and may permanently alter your world or the
+      files on your server.
+    </span>
+  </div>
+</template>