Dashboard - Initial Database Refactor (#338)

* Added a bunch of documentation for the env files

* Removed the logging from the Dashboard

* Dashboard - Initial Refactor of database calls

frontends/dashboard/src/components/login-register/LoginForm.svelte

@@ -16,19 +16,24 @@
   let isButtonLoading: boolean = false
 
   // Toggle between registration and login forms
-  const handleLoginClick = () => {
+  const handleRegisterClick = () => {
     isSignUpView = !isSignUpView
   }
 
   // Handle the form submission
   const handleSubmit = async (e: SubmitEvent) => {
     e.preventDefault()
+
     isFormButtonDisabled = true
     isButtonLoading = true
+    formError = ''
 
-    await handleLogin(email, password, (error) => {
-      formError = error
-    })
+    try {
+      await handleLogin(email, password)
+    } catch (error) {
+      const e = error as Error
+      formError = `Something went wrong with logging you in. ${e.message}`
+    }
 
     isFormButtonDisabled = false
     isButtonLoading = false
@@ -96,7 +101,7 @@
     Need to Register? <button
       type="button"
       class="link font-bold"
-      on:click={handleLoginClick}>Create A New Account</button
+      on:click={handleRegisterClick}>Create A New Account</button
     >
   </div>
 

frontends/dashboard/src/components/login-register/NewInstanceProcessingBlock.svelte

@@ -1,12 +1,7 @@
 <script lang="ts">
-  import { getRandomElementFromArray } from '$util/utilities'
-
   // Fun quotes when waiting for the instance to load. This could take up to 10 seconds
-  let processingQuotesArray = [
-    'Did you know it takes fourteen sentient robots to create each instance on PocketHost?',
-  ]
-
-  let processingQuote = getRandomElementFromArray(processingQuotesArray)
+  let processingQuote =
+    'Did you know it takes fourteen sentient robots to create each instance on PocketHost?'
 </script>
 
 <div class="card-body">

frontends/dashboard/src/routes/login/+page.svelte

@@ -14,9 +14,12 @@
 
     isFormButtonDisabled = true
 
-    await handleLogin(email, password, (error) => {
-      formError = error
-    })
+    try {
+      await handleLogin(email, password)
+    } catch (error) {
+      const e = error as Error
+      formError = `Something has gone wrong with logging in. ${e.message}`
+    }
 
     isFormButtonDisabled = false
   }

frontends/dashboard/src/routes/login/confirm-account/+page.svelte

@@ -19,12 +19,15 @@
   }
 
   const handleLoad = async () => {
-    if (!token) {
-      throw new Error(`Expected valid token here`)
+    try {
+      await handleAccountConfirmation(token)
+
+      // Refresh the app to get the latest info from the backend
+      window.location.href = '/'
+    } catch (error) {
+      const e = error as Error
+      formError = `Something went wrong with confirming your account. ${e.message}`
     }
-    await handleAccountConfirmation(token, (error) => {
-      formError = error
-    })
   }
 </script>
 

frontends/dashboard/src/routes/signup/+page.svelte

@@ -1,10 +1,6 @@
 <script lang="ts">
   import { slide } from 'svelte/transition'
-  import {
-    handleFormError,
-    handleLogin,
-    handleRegistration,
-  } from '$util/database'
+  import { handleLogin, handleRegistration } from '$util/database'
 
   let email: string = ''
   let password: string = ''
@@ -17,16 +13,16 @@
     e.preventDefault()
 
     isFormButtonDisabled = true
+    formError = ''
 
     try {
       await handleRegistration(email, password)
 
       // Go ahead and log the user into the site
       await handleLogin(email, password)
-    } catch (error: any) {
-      handleFormError(error, (error) => {
-        formError = error
-      })
+    } catch (error) {
+      const e = error as Error
+      formError = `Something went wrong with registering your account. ${e.message}`
     }
 
     isFormButtonDisabled = false

frontends/dashboard/src/util/database.ts

@@ -16,81 +16,34 @@ export const handleFormError = (e: Error, setError?: FormErrorHandler) => {
 
 /**
  * This will log a user into Pocketbase, and includes an optional error handler
- * @param email {string} The email of the user
- * @param password {string} The password of the user
- * @param setError {function} This can be used to show an alert bar if an error occurs during the login process
- * @param shouldRedirect {boolean} This will redirect the user to the dashboard when they are logged in
+ * @param {string} email The email of the user
+ * @param {string} password The password of the user
  */
-export const handleLogin = async (
-  email: string,
-  password: string,
-  setError?: FormErrorHandler,
-  redirect = '',
-) => {
+export const handleLogin = async (email: string, password: string) => {
   const { authViaEmail } = client()
-  // Reset the form error if the form is submitted
-  setError?.('')
 
-  try {
-    await authViaEmail(email, password)
-
-    if (redirect) {
-      await goto(redirect)
-    }
-  } catch (error) {
-    if (!(error instanceof Error)) {
-      throw new Error(
-        `Expected Error type here, but got ${typeof error}:${error}`,
-      )
-    }
-    handleFormError(error, setError)
-  }
+  return await authViaEmail(email, password)
 }
 
 /**
  * This will register a new user into Pocketbase, and includes an optional error handler
  * @param email {string} The email of the user
  * @param password {string} The password of the user
- * @param setError {function} This can be used to show an alert bar if an error occurs during the login process
  */
-export const handleRegistration = async (
-  email: string,
-  password: string,
-  setError?: FormErrorHandler,
-) => {
+export const handleRegistration = async (email: string, password: string) => {
   const { createUser } = client()
-  // Reset the form error if the form is submitted
-  setError?.('')
 
-  try {
-    await createUser(email, password)
-  } catch (error: any) {
-    handleFormError(error, setError)
-  }
+  return await createUser(email, password)
 }
 
 /**
  * This will let a user confirm their new account email, and includes an optional error handler
  * @param token {string} The token from the verification email
- * @param setError {function} This can be used to show an alert bar if an error occurs during the login process
  */
-export const handleAccountConfirmation = async (
-  token: string,
-  setError?: FormErrorHandler,
-) => {
+export const handleAccountConfirmation = async (token: string) => {
   const { confirmVerification } = client()
-  // Reset the form error if the form is submitted
-  setError?.('')
 
-  try {
-    await confirmVerification(token)
-
-    window.location.href = '/'
-  } catch (error: any) {
-    handleFormError(error, setError)
-  }
-
-  return false
+  return await confirmVerification(token)
 }
 
 /**
@@ -176,7 +129,7 @@ export const handleInstanceGeneratorWidget = async (
       method: 'POST',
       body: { email, password, instanceName },
     })
-    await handleLogin(email, password, setError)
+    await handleLogin(email, password)
     const instance = await client().getInstanceBySubdomain(instanceName)
     if (!instance) throw new Error(`This should never happen`)
     window.location.href = `/app/instances/${instance.id}`

frontends/dashboard/src/util/utilities.ts

@@ -1,12 +0,0 @@
-import { page as pageStore } from '$app/stores'
-import { get } from 'svelte/store'
-
-export const getRandomElementFromArray = (array: string[]) => {
-  return array[Math.floor(Math.random() * array.length)]
-}
-
-// This returns an object with the current URL information
-export const getRouter = () => {
-  const router = get(pageStore)
-  return router.url
-}