Dashboard - Danger Zone Confirmations (#321)

* Dashboard - Danger Zone Confirmations

* Dashboard - Danger Zone Confirmations

packages/dashboard/src/routes/app/instances/[instanceId]/Danger/RenameInstance.svelte

@@ -4,6 +4,7 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
+  import { slide } from 'svelte/transition'
 
   const { renameInstance } = client()
 
@@ -18,6 +19,9 @@
   // Controls the disabled state of the button
   let isButtonDisabled = false
 
+  // Controls visibility of an error message
+  let errorMessage = ''
+
   // TODO: What are the limits for this?
   const onRename = (e: Event) => {
     e.preventDefault()
@@ -25,12 +29,26 @@
     // Disable the button to prevent double submissions
     isButtonDisabled = true
 
-    // TODO: Set up error handling for when the name is wrong
-    // TODO: Do validations like trim and removing numbers
-    renameInstance({ instanceId: id, subdomain: formSubdomain }).then(
-      () => 'saved',
+    // Remove extra whitespace, and numbers from the subdomain
+    const instanceNameValidation = formSubdomain.trim().replace(/[0-9]/g, '')
+
+    // Prompt the user to confirm the version change
+    const confirmVersionChange = confirm(
+      `Are you sure you want to rename your instance to ${instanceNameValidation}?`,
     )
 
+    // If they select yes, then update the version in pocketbase
+    if (confirmVersionChange) {
+      renameInstance({
+        instanceId: id,
+        subdomain: instanceNameValidation,
+      })
+        .then(() => 'saved')
+        .catch((error) => {
+          errorMessage = error.message
+        })
+    }
+
     // Set the button back to normal
     isButtonDisabled = false
   }
@@ -48,15 +66,25 @@
     else choose it.
   </p>
 
+  {#if errorMessage}
+    <div in:slide class="alert alert-error mb-4">
+      <i class="fa-regular fa-circle-exclamation"></i>
+      {errorMessage}
+    </div>
+  {/if}
+
   <form
     class="flex rename-instance-form-container-query gap-4"
     on:submit={onRename}
   >
     <input
+      title="Only letters and dashes are allowed"
+      required
       type="text"
       bind:value={formSubdomain}
       class="input input-bordered w-full"
     />
+
     <button type="submit" class="btn btn-error" disabled={isButtonDisabled}
       >Rename Instance</button
     >

packages/dashboard/src/routes/app/instances/[instanceId]/Danger/VersionChange.svelte

@@ -4,14 +4,22 @@
   import { DOCS_URL } from '$src/env'
   import { client } from '$src/pocketbase'
   import { instance } from '../store'
+  import { slide } from 'svelte/transition'
 
-  $: ({ id, maintenance } = $instance)
+  $: ({ id, maintenance, version } = $instance)
 
-  let version = $instance.version
+  // Create a copy of the version
+  let instanceVersion = version
+  $: {
+    instanceVersion = version
+  }
 
   // Controls the disabled state of the button
   let isButtonDisabled = false
 
+  // Controls visibility of an error message
+  let errorMessage = ''
+
   // Update the version number
   const handleSave = async (e: Event) => {
     e.preventDefault()
@@ -19,12 +27,26 @@
     // Disable the button to prevent double submissions
     isButtonDisabled = true
 
+    // Prompt the user to confirm the version change
+    const confirmVersionChange = confirm(
+      `Are you sure you want to change the version to ${instanceVersion}?`,
+    )
+
+    // If they select yes, then update the version in pocketbase
+    if (confirmVersionChange) {
       // Save to the database
       client()
-      .saveVersion({ instanceId: id, version: version })
+        .saveVersion({ instanceId: id, version: instanceVersion })
         .then(() => {
           return 'saved'
         })
+        .catch((error) => {
+          errorMessage = error.message
+        })
+    } else {
+      // If they hit cancel, reset the version number back to what it was initially
+      instanceVersion = version
+    }
 
     // Set the button back to normal
     isButtonDisabled = false
@@ -46,13 +68,21 @@
     > should work.
   </p>
 
+  {#if errorMessage}
+    <div in:slide class="alert alert-error mb-4">
+      <i class="fa-regular fa-circle-exclamation"></i>
+      {errorMessage}
+    </div>
+  {/if}
+
   <form
     class="flex change-version-form-container-query gap-4"
     on:submit={handleSave}
   >
     <input
+      required
       type="text"
-      bind:value={version}
+      bind:value={instanceVersion}
       class="input input-bordered w-full"
     />
     <button